React TSX页面加载时如何发起接口请求并处理动态接口地址？

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

const Home = () => {
    const [data, setData] = useState<any>(); // 使用useState存储接口数据，指定类型为any或更具体的类型
    const apiUrl = process.env.REACT_APP_API_URL || 'fallback_api_url'; // 从环境变量获取API地址，或使用备用地址

    useEffect(() => {
        const fetchData = async () => {
            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);
                // 可在此处添加错误处理逻辑，例如显示错误提示
            }
        };

        fetchData();
    }, [apiUrl]); // 仅当apiUrl变化时重新请求

    return (
        <div className={styles.home}>
            <div ref={(dom) => { homeRenderer.setContainer(dom) }} className={styles.container}>
                {/* 使用data渲染数据，避免直接渲染null */}
                {data ? (
                    <pre class="brush:php;toolbar:false;">{JSON.stringify(data, null, 2)}