Javascript 如何在React中设置数据获取完成后的状态

当I console.log fooArray时，我可以看到所有数据，但无法将其分配给状态

arrayOfIds.forEach((id) => {
      firestore
        .collection("foos")
        .doc(id)
        .get()
        .then((foo) => {
          fooArray.push(foo.data());
        });
    });
console.log(fooArray);
// some output
this.setState({ foos: fooArray });
// but nothing passed to the state

这将使用正确的数据设置状态-您没有等待firestore返回的承诺，但有了它，它应该可以工作

---

这将使用正确的数据设置状态-您没有等待firestore返回的承诺，但有了它，它应该可以工作。

firestore返回一个承诺，该承诺在调用setState后得到解决。只有在所有查询完成后，您才需要设置状态，这意味着您需要更改此代码的结构以正确使用承诺。Firestore返回一个承诺，该承诺将在调用设置状态后解析。只有在所有查询完成后，您才需要设置state，这意味着您需要更改此代码的结构以正确使用承诺。这实际上仍然不起作用，因为forEach循环不知道等待每次迭代的结果。您编写的内容将记录一个空数组，而不是等待每个查询完成。因此，当我进行顺序异步工作时，我使用for of循环而不是.forEach（）。您还可以使用Promise.all（arrayOfIds.map（…等…）只是等待得到的承诺数组得到解决。@DougStevenson你是对的，我的错。我将编辑我的答案。这实际上仍然不起作用，因为forEach循环不知道等待每个迭代的结果。你所写的将记录一个空数组，而不是等待每个查询完成。我使用for of循环，而不是。for由于这个原因，当我有顺序异步工作时，Each（）。你也可以使用Promise.all（arrayOfIds.map（…等…）来等待结果承诺数组的解析。@DougStevenson你说得对，我的错。我将编辑我的答案。

 for(let id of arrayOfIds) {
     let foo = await firestore
              .collection("foos")
              .doc(id)
              .get();
     fooArray.push(foo.data());
 }
 console.log(fooArray);
 this.setState({ foos: fooArray });