本文介绍如何在React TSX项目中实现页面加载时自动请求接口，并有效应对接口地址的动态变化。 我们将解决一个常见问题：如何在函数式组件中，类似于Vue的mounted生命周期钩子，实现组件挂载后立即发起接口请求，同时灵活配置接口地址。
原代码缺少显式接口请求，我们将使用React Hooks中的useEffect和useState来解决。useState用于管理接口返回的数据，useEffect则在组件挂载后执行接口请求。通过useEffect的第二个参数设置为空数组[]，确保回调函数只在组件首次挂载时执行一次，类似Vue的mounted。
以下代码演示了如何在Home组件中使用useEffect和fetch请求接口：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
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>
) : (
<p>加载中...</p> // 添加加载状态提示
)}
</div>
<Contorls /> {/* 注意大小写 */}
</div>
);
};
export default Home;
代码中，process.env.REACT_APP_API_URL尝试从环境变量获取接口地址，如果没有则使用一个默认地址。 这使得修改接口地址无需修改代码，只需修改环境变量即可。 建议使用.env文件或类似机制管理环境变量。 我们也添加了加载状态提示，提升用户体验。 请注意代码中className和Contorls的大小写修正。 homeRenderer.setContainer(dom) 的具体功能需要根据实际项目代码进行理解和调整。 此示例提供了一个更健壮和用户友好的解决方案。
