本文讲解如何在 React TSX 项目中实现页面加载时自动请求接口，并处理动态接口地址。这类似于 Vue 的 mounted 生命周期钩子。
示例代码使用了函数式组件：
<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)}}
代码改进：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 使用
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)。 构建工具会在构建过程中将这些变量注入到你的代码中。
