ReactJS：如何在循环请求数据后异步返回更新后的对象？

这是个很常见的异步处理坑——你现在的函数是同步执行的，而axios.post是异步操作，forEach循环发起请求后，函数会立刻返回newState，这时候所有请求都还没拿到响应，自然状态没更新。咱们来调整一下代码，让它等所有请求完成后再返回更新后的状态：

核心思路 #

1. 把每个axios.post请求包装成Promise，收集到一个数组里
2. 用Promise.all等待所有请求都完成（或有一个失败）
3. 等所有响应都回来后，再统一更新newState
4. 把函数改成异步函数（用async/await），这样它会返回一个Promise，调用方可以拿到最终更新后的状态

修改后的代码 #

const requestSideBarData = async (state, request) => {
  // 先做浅拷贝，避免直接修改原state对象（React状态不可变的最佳实践）
  let newState = { ...state, data: { ...state.data } };
  
  // 用map遍历key，生成每个请求的Promise，同时保存对应的element名
  const requestPromises = Object.keys(newState.data).map(element => {
    return axios.post(`${ApiEndPoints.getDropDownHeaders}${element}`, request)
      .then(response => ({
        element,
        data: response.data
      }));
  });

  try {
    // 等待所有请求完成，拿到所有结果
    const allResults = await Promise.all(requestPromises);
    
    // 遍历结果，更新newState的对应字段
    allResults.forEach(({ element, data }) => {
      newState.data[element] = data;
    });

    // 所有请求完成且状态更新后，返回newState
    return newState;
  } catch (error) {
    console.error('侧边栏数据请求出错:', error);
    // 出错时可以返回原拷贝的状态，或者根据需求处理错误状态
    return newState;
  }
};

关键细节说明 #

• 为什么用map而不是forEach？因为forEach只是执行操作，不会返回值；map可以把每个请求的Promise收集成数组，供Promise.all使用。
• 浅拷贝的重要性：原来的let newState = state是引用赋值，修改newState.data会直接改动原state对象，这在React中会导致状态更新异常。这里用对象展开语法做了浅拷贝，如果你的data里有嵌套对象，可能需要用深拷贝（比如JSON.parse(JSON.stringify(state))或者lodash的cloneDeep）。
• 错误处理：Promise.all会在任意一个请求失败时立刻进入catch，你可以在这里统一处理错误，比如给用户提示，或者返回错误状态。

调用方式 #

因为现在函数返回的是Promise，所以调用时需要用await或者.then()：

// 用async/await调用（需要在async函数中）
const updatedSideBarState = await requestSideBarData(originalState, requestParams);

// 或者用.then()链式调用
requestSideBarData(originalState, requestParams)
  .then(updatedState => {
    // 在这里处理更新后的状态，比如setState
  })
  .catch(err => {
    // 处理错误
  });

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