Javascript React-在每个forEach API请求完成后设置状态

我有一段代码，看起来像这样

data.forEach(driver => {
          wiki().page(`${driver.Driver.givenName} ${driver.Driver.familyName}`)
          .then(page => page.mainImage())
          .then(img => driver.image = img)
        })

        this.setState({
          drivers: data
        })
      })

因此，对于数组中的每个元素，它都会调用一个api，然后向数据对象添加一个属性。然而，我还想在所有这些异步操作完成后设置state，我不知道如何在forEach循环中执行它。我怎样才能做到这一点呢？

你应该用它来获得一系列承诺，然后你可以用它等待。然后：

您应该使用获取一系列承诺，然后可以使用等待。然后：

---

把它放在一个有用的钩子里？不要很好地使用类…您可以使用映射而不是forEach，并将每个数据项映射为一个承诺—您已经在forEach中创建了一个承诺。将结果数组传递给Promise.all，它将在解析之前等待数组中的每个承诺完成：Promise.allarrayOfPromises.thenresultArray=>{/*做一些事情*/}@JacobSmit我对承诺有点陌生，我理解.all部分，但是我应该如何在.map函数中分配它们并准确返回它们呢？似乎有人已经给出了一个示例作为答案，这应该为您指明正确的方向。将它放在useEffect挂钩中？不要很好地使用类…您可以使用映射而不是forEach，并将每个数据项映射为一个承诺—您已经在forEach中创建了一个承诺。将结果数组传递给Promise.all，它将在解析之前等待数组中的每个承诺完成：Promise.allarrayOfPromises.thenresultArray=>{/*做一些事情*/}@JacobSmit我对Promises有点陌生，我理解.all部分，但是我应该如何在.map函数中分配它们并准确返回它们呢？似乎有人已经给出了一个示例作为答案，这应该为您指明正确的方向。我认为您在map中的then缺少右括号。非常感谢，我现在理解了这个概念，但是现在我在spread操作符上遇到了一个意外的令牌错误。你知道为什么会这样吗？哦，对不起，这是一个语法错误，带有返回对象的箭头函数，我又陷入了这个错误，因为我没有运行捕获它的代码。只需将对象括在括号中即可。我会编辑。谢谢你捕捉到这个错误@JacobSmit-我现在已经做了两次编辑，明白了！现在它工作得很好，非常感谢！我想你的地图中的then缺少右括号。非常感谢，我现在理解了这个概念，但是现在我在spread操作符上遇到了一个意外的令牌错误。你知道为什么会这样吗？哦，对不起，这是一个语法错误，带有返回对象的箭头函数，我又陷入了这个错误，因为我没有运行捕获它的代码。只需将对象括在括号中即可。我会编辑。谢谢你捕捉到这个错误@JacobSmit-我现在已经做了两次编辑，明白了！现在它工作得很好，非常感谢！

const promises = data.map(driver =>
  wiki().page(`${driver.Driver.givenName} ${driver.Driver.familyName}`)
  .then(page => page.mainImage())
);

Promise.all(promises).then(images => {
  const newData = data.map((driver, idx) => ({ ...driver, image: images[idx] }))
  this.setState({ data: newData });
});