React从JSON URL获取数据填充数组后JSX调用报错问题问询

问题根因 #

• 你定义的arry是普通JS变量，React不会监听它的变化，就算后续数组填充了也不会触发组件重新渲染，JSX永远读取的是首次渲染时的空数组
• getdriver是异步函数，调用后不会阻塞后续代码执行，组件首次渲染时fetch请求还没有返回结果，此时数组确实是空的
• 控制台打印数组时输出的是数组的引用，等你点开查看详情时异步请求已经完成、数组被填充了，所以看起来有值，但打印长度的逻辑是请求返回前执行的，所以输出为0（额外提示：你这里拼写错误，lenght需修正为length）

修复方案 #

你需要用React的状态管理存储异步获取的数据，状态更新后会自动触发组件重渲染，就能正常获取到数据了，参考实现如下：
首先引入需要的React Hook：

import { useState, useEffect } from 'react';

组件内逻辑调整为：

// 用useState存储驱动列表数据，初始值为空数组
const [driverList, setDriverList] = useState([]);
// 加载状态用于区分请求中/请求完成的渲染逻辑
const [isLoading, setIsLoading] = useState(true);

async function getDriver() {
  try {
    const response = await fetch("https://ergast.com/api/f1/current/drivers.json");
    const resData = await response.json();
    // 更新状态，触发组件重渲染
    setDriverList(resData.MRData.DriverTable.Drivers);
  } catch (err) {
    console.error("数据获取失败：", err);
  } finally {
    setIsLoading(false);
  }
}

// 组件挂载时执行一次请求，空依赖数组避免重复触发请求
useEffect(() => {
  getDriver();
}, []);

JSX部分调整，增加空值防护：

return (
  <div>
    <Menu />
    <div style={{ textAlign: "left" }}>
      <h4>ff</h4>
      <Button>change</Button>
      <br />
      {/* 加载中显示提示，加载完成后用可选链避免空数组访问报错 */}
      <i>{isLoading ? "数据加载中..." : driverList[0]?.code}</i>
    </div>
  </div>
);

方案说明 #

• 状态driverList更新后会自动触发组件重新渲染，JSX就能拿到最新的数组数据
• 可选链?.和加载状态判断，避免数据加载完成前访问空数组元素抛出错误
• useEffect加空依赖数组保证请求只会在组件挂载时执行一次，不会出现你提到的Promise循环问题

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