React JS中无法获取API返回JSON内fielding字段数据的问题

看起来你遇到的问题主要来自异步数据加载的时序问题、状态管理方式不对，以及数据访问路径错误这几个方面，我来帮你一步步修复：

问题分析 #

1. 你用普通数组currentdata = []存储接口返回的数据，但React无法感知普通数组的变化，就算数据加载完成，组件也不会重新渲染来展示新数据。
2. 异步函数fetchData执行是需要时间的，你在组件初始化时直接console.log(currentdata)，此时数据还没加载完成，数组是空的，自然读不到fielding。
3. 数据访问路径错误：currentdata是你用push存入的数组，所以正确的访问应该是currentdata[0].data，而不是currentdata.data。

修复后的代码 #

import { useState, useEffect } from "react";

const Runtorun = ({ match }) => {
  const params = match.params;
  const [currentdata, setCurrentdata] = useState(null); // 用useState管理状态，初始为null

  async function fetchData() {
    const apiKey = "o7aO0AGvIcd4CMasVKLh0OG4Ijc2";
    const url = `https://cricapi.com/api/fantasySummary?apikey=${apiKey}&unique_id=${params.unique_id}`;
    
    try {
      const response = await fetch(url);
      const data = await response.json();
      setCurrentdata(data); // 直接把返回的对象存入状态，不用数组包裹
    } catch (error) {
      console.error("加载数据失败:", error);
    }
  }

  useEffect(() => {
    fetchData();
  }, [params.unique_id]); // 依赖unique_id，只有当id变化时才重新请求，避免无限循环

  // 调试用：当数据加载完成后再打印fielding数据
  useEffect(() => {
    if (currentdata?.data?.fielding) {
      console.log("Fielding数据:", currentdata.data.fielding);
      // 如果你想取第一个fielding项的title
      console.log("第一个fielding的title:", currentdata.data.fielding[0]?.title);
    }
  }, [currentdata]);

  return (
    <div>
      {/* 条件渲染：只有当数据存在时才展示fielding内容 */}
      {currentdata?.data?.fielding ? (
        <div>
          <h2>Fielding Stats</h2>
          {currentdata.data.fielding.map((item, index) => (
            <div key={index}>
              <h3>{item.title}</h3>
              {/* 遍历item里的球员数据，假设每个item有players数组 */}
              {item.players?.map((player, pIndex) => (
                <div key={pIndex}>
                  <p>{player.name}: {player.value}</p>
                </div>
              ))}
            </div>
          ))}
        </div>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
};

export default Runtorun;

关键修改点说明 #

• 用useState管理数据：把普通数组改成React状态，这样数据更新时会自动触发组件重新渲染。
• 简化数据存储：接口返回的是单个对象，不需要用数组包裹，直接把整个对象存入状态更合理。
• 错误处理：添加try/catch捕获请求过程中的错误，避免程序崩溃。
• 修正useEffect依赖：添加params.unique_id作为依赖，确保只有当比赛ID变化时才重新发起请求，避免无限循环。
• 条件渲染与可选链：用?.可选链操作符避免访问undefined属性报错，同时通过条件渲染确保数据加载完成后再展示内容。
• 正确的数据访问路径：currentdata.data.fielding是接口返回的fielding数组，直接遍历即可获取内部数据。

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