React TSX中如何实现页面加载时自动请求接口并处理接口地址动态变化？

<code class="typescript">import Contorls from "./component/Contorls/Contorls";
import homeRenderer from "./homeRender";
import styles from "./index.module.less";
import { useState, useEffect } from 'react';

const Home = () => {
    const [data, setData] = useState<any>(); // 定义数据类型，避免潜在问题

    useEffect(() => {
        const fetchData = async () => {
            const apiUrl = process.env.REACT_APP_API_URL || '你的默认接口地址'; // 从环境变量获取，或使用默认地址
            try {
                const response = await fetch(apiUrl);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const jsonData = await response.json();
                setData(jsonData);
            } catch (error) {
                console.error("Error fetching data:", error);
                //  更完善的错误处理，例如显示错误信息给用户
            }
        };
        fetchData();
    }, []);

    return (
        <div className={styles.home}> {/* 注意：className, 不是 classname */}
            <div ref={(dom) => homeRenderer.setContainer(dom)} className={styles.container}>
                {data ? (
                    <p>接口返回数据: {JSON.stringify(data)}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1717">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680315825545.png" alt="千面视频动捕">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1717">千面视频动捕</a>
                            <p>千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="千面视频动捕">
                                <span>27</span>
                            </div>
                        </div>
                        <a href="/ai/1717" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="千面视频动捕">
                        </a>
                    </div>
                
                ) : (
                    <p>加载中...</p>  // 添加加载状态提示
                )}
            </div>
            <Contorls /> {/* 注意大小写 */}
        </div>
    );
};

export default Home;</code>