React中从JSON接口获取图片URL存入数组后无法访问的问题

核心问题：异步请求的时序差 #

你调用API拿JSON是异步操作，代码不是从上到下同步跑完的。当你急着去访问数组元素时，API请求可能还没完成，数组其实还是初始的空状态（或者没赋值），自然拿不到东西。而手动写的数组是同步赋值的，代码走到访问array[0]那一步时，数组已经有值了，所以能正常用。

React场景下的具体解决步骤 #

1. 用状态存异步数据 #

在React里，得用useState来存图片URL数组，初始值设为空数组：

const [imageUrls, setImageUrls] = useState([]);

2. 用useEffect发请求 #

把API请求放在useEffect里，保证组件挂载后才发起请求，请求成功后更新状态：

useEffect(() => {
  // 比如请求10张图片的信息
  fetch('https://picsum.photos/v2/list?limit=10')
    .then(res => res.json())
    .then(data => {
      // 提取所有图片URL存进状态
      const urls = data.map(item => item.download_url);
      setImageUrls(urls);
    })
    .catch(err => console.error('请求出错:', err));
}, []); // 空依赖数组确保只执行一次

3. 访问元素前先判断数组是否有内容 #

因为状态更新是异步的，组件渲染时得先检查数组有没有数据，再去访问元素，避免报错：

// 方式1：条件渲染
return (
  <div>
    {imageUrls.length > 0 ? (
      <img src={imageUrls[0]} alt="随机图片" />
    ) : (
      <p>加载中...</p>
    )}
  </div>
);

// 方式2：用可选链简化判断
return (
  <div>
    <img src={imageUrls[0]?.toString()} alt="随机图片" />
  </div>
);

别踩这个坑 #

别在组件顶层直接写异步请求然后立刻访问数组，比如：

// 错误示例：请求完成前imageUrls是空数组，访问[0]得到undefined
const [imageUrls, setImageUrls] = useState([]);
fetch('xxx').then(data => setImageUrls(data.map(...)));
console.log(imageUrls[0]); // 输出undefined

因为fetch是异步的，console.log会在请求完成前执行，这时候状态还没更新呢。

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