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>(null); // 定义数据状态和类型

    useEffect(() => {
        const fetchData = async () => {
            try {
                const apiUrl = getApiUrl(); // 获取动态接口地址
                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();
    }, []); // 空数组确保 useEffect 只执行一次

    return (
        <div className={styles.home}>
            <div ref={(dom) => homerenderer.setContainer(dom)} className={styles.container}>
                {/* 使用 data 渲染内容 */}
                {data && <pre class="brush:php;toolbar:false;">{JSON.stringify(data, null, 2)}