如何在含异步操作的map循环完成后执行setState？

当然可行！完全没必要改成同步的for循环——你只需要用Promise.all()来等待所有map里的异步操作全部完成，之后再调用setState就好了。

先给你理清楚问题所在：数组的map()方法本身是同步执行的，但如果你在map里放了异步函数，map会立刻返回一个Promise数组，而不会等这些异步操作逐个完成。所以如果直接在map之后调用setState，那 setState 会在所有异步操作还没做完的时候就执行，这显然不是你想要的结果。

解决方法1：并行执行异步操作（推荐，效率更高） #

用Promise.all()包裹map返回的Promise数组，await这个Promise.all，等所有异步操作都resolve之后再执行setState：

async function handleRequests() {
  // 先等待所有初始HTTP请求完成，拿到响应数组
  const responses = await Promise.all(yourHttpRequests);

  // 用map把每个响应对应的异步操作转成Promise，再用Promise.all等待全部完成
  await Promise.all(responses.map(async (res) => {
    // 这里是你的异步操作，比如处理响应、发送后续请求等
    await processResponse(res);
    // 其他异步逻辑...
  }));

  // 现在所有异步操作都完成了，放心更新状态
  setState(someNewState);
}

解决方法2：顺序执行异步操作（适合有依赖的场景） #

如果你的异步操作需要按顺序执行（比如下一个操作依赖上一个的结果），那可以用for...of循环代替map，这样每个异步操作完成后才会进行下一个：

async function handleRequests() {
  const responses = await Promise.all(yourHttpRequests);

  // 按顺序遍历每个响应，等待当前异步操作完成后再处理下一个
  for (const res of responses) {
    await processResponse(res);
    // 顺序执行的异步逻辑...
  }

  setState(someNewState);
}

总结 #

不管是并行还是顺序执行，都能保持函数的异步特性，而且能确保所有异步操作完成后才更新状态。不需要改用传统的同步for循环，用Promise.all() + map或者for...of就完全能满足你的需求。

内容的提问来源于stack exchange，提问作者Eli Levit