react tsx页面加载时发起接口请求及动态接口地址处理
本文介绍如何在React TSX项目中，于页面加载完成时发起接口请求，并处理动态接口地址。 目标是在组件挂载后自动请求数据，同时避免接口地址硬编码。
问题：现有React组件需要在加载后发起API请求，但API地址并非固定。
解决方案：利用useEffect hook实现组件挂载后的副作用，并通过环境变量或配置文件动态配置API地址。
代码示例：
首先，使用useState hook管理接口返回的数据：
AI舌诊面诊问诊医疗系统+诊疗商城系统源码
下载
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
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)}
) : (
加载中...
// 添加加载提示 )}代码说明：
-
useState<any>()</any>: 使用泛型指定data的状态类型，建议根据实际接口返回的数据类型进行调整。 -
process.env.REACT_APP_API_URL: 从环境变量获取API地址。 需要在.env文件中设置REACT_APP_API_URL=your_api_url。|| 'fallback_api_url'提供了备用地址，防止环境变量未设置。 -
useEffect: 在组件挂载时执行fetchData函数。[apiUrl]依赖数组确保只有当apiUrl变化时才重新发起请求。 -
async/await: 使用async/await简化异步操作。 - 错误处理：添加
try...catch块处理潜在的网络错误或JSON解析错误。 - 加载提示：添加加载提示，提升用户体验。
- 数据渲染：使用三元运算符
data ? ... : ...避免直接渲染null，防止错误。
动态接口地址的处理：
本例中，通过环境变量管理API地址，这是一种常见的做法。 其他方法包括：
- 配置文件：将API地址存储在单独的配置文件中，在构建时或运行时加载。
- 配置服务：从远程配置服务获取API地址。
选择哪种方法取决于项目规模和复杂性。 记住，关键在于将API地址与代码逻辑分离，方便维护和更新。
通过以上步骤，即可在React TSX中实现页面加载时发起接口请求，并灵活处理动态接口地址，避免硬编码，提高代码的可维护性和可扩展性。
