React中使用Axios嵌套调用API时状态更新异常问题

你能正确打印目标数据，但设置React State时得到空对象。console.log(tempOwnership)看似输出了字典对象数组，但setOwnerData(tempOwnership)无法生效导致DOM无内容渲染；注释掉该语句后，默认状态的"mechanical"可正常渲染。

问题原因 #

核心是异步操作时序错误：在fetchOwnershipData中，你用forEach循环调用异步函数fetchOwnerData，但未等待所有异步请求完成就直接执行了setOwnerData(tempOwnership)。此时tempOwnership仍是空数组——fetchOwnerData的Promise还未resolve，.then里的push操作还没执行。浏览器控制台会因为引用类型的延迟更新显示后续填充的数组，但代码执行时setOwnerData确实拿到的是空数组。

解决方案 #

将forEach替换为map生成Promise数组，用Promise.all等待所有异步请求完成后再更新state：

修改后的fetchOwnershipData函数 #

const fetchOwnershipData = async (id) => {
  try {
    const results = await OwnershipAPI.getByDt(id)
    // 将每个元素对应的异步请求转为Promise，存入数组
    const ownershipPromises = results.data.map(element => 
      fetchOwnerData(element.domain, element.user)
    )
    // 等待所有Promise完成，获取完整数据数组
    const tempOwnership = await Promise.all(ownershipPromises)
    console.log(tempOwnership)
    setOwnerData(tempOwnership)
  } catch (error) {
    console.log(error);
  }
}

说明 #

• Promise.all会等待所有传入的Promise都resolve后，返回包含所有结果的数组，顺序与原Promise数组一致
• 确保调用setOwnerData时，tempOwnership已经填充了所有异步获取到的数据
• 原代码中forEach内的异步操作是并行执行的，但未等待完成就更新state，导致状态更新过早

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