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

本文讲解如何在 React TSX 项目中实现页面加载时自动请求接口，并处理动态接口地址。这类似于 Vue 的 mounted 生命周期钩子。

示例代码使用了函数式组件：

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(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 (
        

            
 homerenderer.setContainer(dom)} className={styles.container}>
                {/* 使用 data 渲染内容 */}
                {data && 
{JSON.stringify(data, null, 2)}
}
            
            
        
    );
};

// 获取动态接口地址，可以根据环境变量、配置文件等方式实现
const getApiUrl = (): string => {
    // 例如：从环境变量获取
    const envUrl = process.env.REACT_APP_API_URL;
    return envUrl || '/api/data'; // 默认地址
};

export default home;

代码改进：

• 使用 async/await 简化异步操作。
• 添加了错误处理机制。
• 使用 getApiUrl 函数获取动态接口地址，你可以根据实际情况修改此函数，例如从配置文件、URL参数或其他来源获取地址。
• 明确了 data 的类型为 any，建议根据实际接口返回类型进行修改。
• 添加了对 data 的判断，避免在数据未获取时渲染出错。

动态接口地址处理： getApiUrl 函数演示了如何从环境变量获取 API 地址。 你也可以使用其他方法，例如：

• 配置文件 (config.json): 在项目中创建配置文件，根据环境加载不同的配置。
• URL 参数: 从 URL 中获取接口地址。
• Redux/Context: 使用状态管理库管理接口地址。

选择最适合你项目结构和复杂程度的方法来处理动态接口地址。 记住在 .env 文件中设置 REACT_APP_API_URL 环境变量 (例如 REACT_APP_API_URL=https://your-api.com/data)。 构建工具会在构建过程中将这些变量注入到你的代码中。