React中打印数组正常但访问数组元素返回undefined的问题解决

数据老陈

2026-7-13

异步数据加载后数组索引返回undefined的解决方法

你的核心问题是异步操作未完成就更新了状态，导致cameraStations初始被设为空数组，后续异步获取到数据后没有同步更新状态，所以组件中始终拿不到填充后的数组。

原代码问题分析

在useEffect中，你发起异步请求后立刻调用setCameraStations(tempCameraArr)和setStudies(tempStudyArr)，此时临时数组还未被异步结果填充，状态被设置为空数组。
后续异步请求完成后，你仅将数据push到临时数组，但没有再次调用setState更新组件状态，因此组件中的cameraStations始终是空数组，访问cameraStations[0]自然返回undefined。
当添加if (cameraStations[0] == undefined) return null时，由于初始状态就是空数组，该判断始终为真，组件无法完成渲染。

正确实现方式

通过在useEffect中定义异步函数，等待所有异步操作完成后再统一更新状态：

useEffect(() => {
  const getData = async () => {
    // 先获取所有studies数据
    const studiesList = await window.datastore.getStudies();

    // 并行获取每个study对应的cameraStations，用Promise.all等待全部请求完成
    const stations: CameraStation[][] = await Promise.all(
      studiesList.map(async (study) => {
        const cameras = await window.datastore.getCameraStations(study);
        return cameras;
      })
    );

    // 所有数据加载完成后更新状态
    setStudies(studiesList);
    setCameraStations(stations);
  };

  getData().catch(console.error);
}, []);