React异步请求后数组元素未同步更新的原因及嵌套数组构建疑问

安全阿岳

2026-8-19

问题原因

调用getData时没有等待异步操作完成，console.log执行时axios请求还未返回结果，此时array[0]仍是你初始push的0。
浏览器控制台的数组是实时引用，当你展开它时，异步请求已经完成，array[0]已被更新为接口返回的对象数组，所以能看到正确结果。

解决方案

要构建数组的数组且处理动态数量的请求，推荐用Promise.all批量处理异步操作，确保所有请求完成后再获取完整结果：

改写getData函数

让它返回获取到的数据，避免直接修改外部数组的副作用：

const getData = async (url) => {
  const response = await axios.get(url);
  return response.data;
};

批量处理动态请求

根据运行时的请求数量生成Promise数组，用Promise.all等待所有请求完成：

// 假设props.location.groupArray是包含所有请求链接的数组
const fetchAllData = async () => {
  // 生成所有请求的Promise实例
  const promiseArray = props.location.groupArray.map(item => getData(item.link));
  // 等待所有请求完成，得到结果数组（每个元素是接口返回的对象数组）
  const resultArray = await Promise.all(promiseArray);
  
  console.log(resultArray); // 所有元素均为正确的对象数组
  console.log(resultArray[0].length); // 可正常获取数组长度
};

// 执行批量请求
fetchAllData();