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

【问题标题】：How to set state after data fetch complete in React如何在 React 中数据获取完成后设置状态
【发布时间】：2020-12-04 13:30:03
【问题描述】：

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

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

【问题讨论】：

Firestore 返回一个 Promise，在 setState 被调用后解决。 blog.sessionstack.com/…
只有在所有查询完成后才需要 setState，这意味着您需要更改此代码的结构才能正确使用 Promise。

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

 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 });

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

【讨论】：

这实际上仍然行不通，因为 forEach 循环不知道等待每次迭代的结果。您编写的内容将记录一个空数组，而不是等待每个查询完成。
由于这个原因，当我有顺序异步工作时，我使用 for-of 循环而不是 .forEach()。
你也可以使用 Promise.all(arrayOfIds.map(...etc...) 只是为了等待得到的 promise 数组解决。
@DougStevenson 你是对的，我的错。我将编辑我的答案。