React中useEffect钩子调用API获取数据无返回结果求助

核心问题分析 #

你的代码缺少错误捕获机制，且存在可能的URL格式问题，导致无法定位请求失败的原因。以下是具体排查和修复方案：

1. 强制添加错误处理逻辑 #

fetch仅在网络故障时触发catch，HTTP错误（如401密钥无效、429请求超限、403无权限）不会自动抛出异常。必须手动检查响应状态并捕获错误：

useEffect(() => {
  const options = {
    method: 'GET',
    headers: {
      'X-RapidAPI-Key': '**********************',
      'X-RapidAPI-Host': 'api-football-v1.p.rapidapi.com'
    }
  };

  // 修正URL：移除路径末尾多余的问号
  fetch('https://api-football-v1.p.rapidapi.com/v3/standings?season=2021&league=39', options)
    .then((res) => {
      // 检查HTTP响应状态
      if (!res.ok) {
        throw new Error(`请求失败，状态码：${res.status}`);
      }
      return res.json();
    })
    .then((json) => {
      console.log(json);
      return json.response;
    })
    .then((teams) => {
      setTeams(teams);
    })
    .catch((error) => {
      // 打印错误信息，定位问题
      console.error('接口请求出错:', error);
    });
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

2. 排查API权限与配置 #

• 确认你的RapidAPI密钥已正确绑定api-football接口，且已完成免费订阅（即使免费层也需要手动订阅才能使用）。
• 检查RapidAPI控制台的请求配额，是否已达到免费层的调用上限（免费层通常限制每日请求次数）。
• 验证密钥是否存在拼写错误，注意密钥的大小写和特殊字符。

3. 直接测试接口（排除React代码干扰） #

用Postman或curl直接调用接口，确认接口本身可正常返回数据：

curl --request GET \
  --url 'https://api-football-v1.p.rapidapi.com/v3/standings?season=2021&league=39' \
  --header 'X-RapidAPI-Key: 你的密钥' \
  --header 'X-RapidAPI-Host: api-football-v1.p.rapidapi.com'

如果此请求也失败，问题出在API配置而非React代码；如果成功，则回到React代码排查CORS或其他逻辑问题。

4. 处理本地开发CORS问题 #

如果本地开发时浏览器报CORS错误，可通过以下方式解决：

• 在package.json中添加代理配置（仅适用于create-react-app）：

  "proxy": "https://api-football-v1.p.rapidapi.com"
  

  然后修改fetch路径为相对路径：

  fetch('/v3/standings?season=2021&league=39', options)
  

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