React中map内await无效，如何等待所有请求完成后执行代码？

你遇到的核心问题有两个：一是**map不会等待内部的异步操作完成**，二是**setState是异步的，且直接依赖this.state进行更新会导致状态覆盖**，另外你最后的console.log执行时机也不对。

具体原因拆解 #

1. Array.map与异步函数的兼容性问题：
   当你在map里使用async/await时，map并不会等待每个异步请求完成，而是直接返回一个由Promise组成的数组，然后立刻执行后面的console.log——这就是为什么你总是看到空数组，此时所有请求还在pending状态。

2. setState的异步性与状态依赖问题：
   你在then里直接使用[...this.state.reposAndCommits, ...]来更新状态，但setState是异步批量更新的，多次调用时，this.state.reposAndCommits可能还是初始的空数组，最终只会保留最后一次请求的结果，而不是累加所有仓库的提交数。

3. console.log的执行时机：
   即使你等所有请求完成，直接在setState后调用console.log也拿不到最新状态，因为setState的更新不会立即反映到this.state中。

修复后的代码 #

getCommitsInfo = async () => { 
  const { repos, user } = this.state;
  try {
    // 生成所有请求的Promise数组，用Promise.all等待全部完成
    const commitPromises = repos.map(repo => 
      axios.get(`https://api.github.com/repos/${user}/${repo}/commits`)
        .then(res => ({ repo: repo, commits: res.data.length })) // 存储仓库名和对应提交数
    );

    // 等待所有请求完成，拿到所有结果
    const allCommitData = await Promise.all(commitPromises);

    // 一次性更新状态，这里也可以用函数式更新确保状态正确
    this.setState({ 
      reposAndCommits: allCommitData 
    }, () => {
      // 在setState的回调里打印最新状态，因为回调会在状态更新完成后执行
      console.log(this.state.reposAndCommits);
    });
  } catch (err) {
    console.log('请求出错:', err);
  }
}

关键优化点说明 #

• 用Promise.all等待所有异步请求：把每个仓库的请求包装成Promise，然后用Promise.all统一等待全部完成，这样就能保证所有请求结束后再更新状态。
• 避免多次setState：一次性把所有结果存入状态，既提升性能，也避免了异步更新导致的状态覆盖问题。
• setState的回调函数：如果需要在状态更新后立即操作最新状态，要使用setState的第二个参数（回调函数），它会在状态更新完成后执行。
• 解构赋值简化代码：提前解构this.state里的repos和user，让代码更简洁易读。

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