React中API获取对象数组无法传入ResponseTable组件问题求助

嘿，我来帮你排查这个问题～你遇到的核心问题是Fetch API是异步操作，而你目前的代码既没正确解析返回的JSON数据，也没把获取到的数组更新到组件状态里，导致<ResponseTable>一开始拿不到有效数据；而自定义的car数组是同步存在的，所以组件能正常渲染。

下面是具体的修复步骤：

1. 修正Fetch数据处理逻辑 #

你现在的代码里只是打印了response.json（这是一个方法，不是结果），并没有实际解析JSON数据。需要调用response.json()（它返回一个Promise），然后在后续的then里拿到真实数据：

fetchData() {
  fetch('http://localhost:8000/sprints/23')
    // 先校验响应是否成功
    .then(response => {
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      return response.json(); // 调用json()解析响应体
    })
    .then(fetchedData => {
      // 将获取到的数组更新到组件state中
      this.setState({ tableData: fetchedData });
      console.log('获取到的数据：', fetchedData);
    })
    .catch(error => {
      console.error('获取数据出错：', error);
    });
}

2. 在组件挂载时调用Fetch方法 #

要确保组件挂载后就发起请求，在componentDidMount生命周期钩子中调用fetchData：

componentDidMount() {
  this.fetchData();
}

3. 初始化State并传递数据给组件 #

首先在构造函数里初始化tableData为空数组（避免组件一开始接收undefined报错），然后在render里把state中的数据传给<ResponseTable>：

constructor(props){
  super(props);
  // 初始化空数组作为默认值
  this.state = { tableData: [] };
}

render() {
  // 把state里的tableData传给组件
  return <ResponseTable data={this.state.tableData} />;
}

为什么自定义数组能正常工作？ #

因为car数组是同步定义的变量，组件渲染时它已经存在；而Fetch是异步操作，组件第一次渲染时请求还没完成，state里没有数据，所以必须通过setState更新状态，触发组件重新渲染，才能把获取到的数组传给<ResponseTable>。

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