React使用RapidAPI+Axios重复请求API数据的问题求助

问题根源 #

你直接在组件顶层执行fetchSportsData()，React组件每次渲染（包括调用setSportsData更新状态后的重渲染）都会重新执行这段代码，导致API被反复请求。

修复方案 #

使用React的useEffect钩子，将API调用逻辑包裹进去，并设置空依赖数组，确保只在组件挂载时执行一次请求：

修改后的React .tsx文件 #

import { useState, useEffect } from 'react';
import axios from 'axios';
import { testApi } from './你的API文件路径';

const YourComponent = () => {
  // 为TypeScript添加类型定义（可选，推荐）
  const [sportsData, setSportsData] = useState<any>(null);
  // 添加加载状态，提升用户体验
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const fetchSportsData = async () => {
    try {
      const response = await axios.request(testApi);
      setSportsData(response.data);
    } catch (err) {
      setError(err instanceof Error ? err.message : '请求失败');
      console.error(err);
    } finally {
      setIsLoading(false);
    }
  };

  // 空依赖数组确保仅在组件挂载时执行一次请求
  useEffect(() => {
    fetchSportsData();
  }, []);

  // 基础渲染逻辑示例
  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>错误：{error}</div>;

  return (
    <div>
      {/* 这里渲染你的sportsData内容 */}
    </div>
  );
};

export default YourComponent;

额外优化建议 #

• 依赖数组管理：如果API请求需要依赖动态参数（比如用户ID、筛选条件），要把这些参数加入依赖数组，确保参数变化时重新请求；无依赖则保持空数组。
• TypeScript类型优化：建议为sportsData定义具体的接口类型，替代any，提升代码健壮性。
• 防止内存泄漏：如果组件在请求完成前卸载，可添加清理函数取消请求：

  useEffect(() => {
    const source = axios.CancelToken.source();
    const fetchData = async () => {
      try {
        const response = await axios.request({
          ...testApi,
          cancelToken: source.token
        });
        setSportsData(response.data);
      } catch (err) {
        if (!axios.isCancel(err)) {
          setError(err instanceof Error ? err.message : '请求失败');
          console.error(err);
        }
      } finally {
        setIsLoading(false);
      }
    };
    fetchData();
    // 组件卸载时取消请求
    return () => source.cancel('组件卸载，取消请求');
  }, []);
  

内容的提问来源于stack exchange，提问作者rt10