首页 > 解决方案 > 如何在 React 中数据获取完成后设置状态

问题描述

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 我可以看到所有数据但无法将其分配给状态

标签: javascriptreactjsfirebasegoogle-cloud-firestore

解决方案


 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 但它应该可以工作。


推荐阅读