从 Firestore DocumentReferences 列表中获取数据到 State React答案

【问题标题】：Get Data from a List of Firestore DocumentReferences to State React从 Firestore DocumentReferences 列表中获取数据到 State React
【发布时间】：2020-08-23 17:04:50
【问题描述】：

我有一个 Firebase DocumentReferences 列表，我需要获取数据并使用该数据设置状态。

这是我尝试过的：

useEffect(() => {
      let x = [];
      roomData.players.forEach(
        async (playerRef: FirebaseFirestoreTypes.DocumentReference) => {
          const playerSnap = await playerRef.get()
          x.push(playerSnap.data())
        }
      );
      setPlayers(x)

列表有 2 个项目。状态被设置了 3 次。一次通常带有 2 个对象。第二次它被设置为一个空数组和 3 只有一个对象。

【问题讨论】：

标签： javascript reactjs react-native google-cloud-firestore react-redux

【解决方案1】：

首先，您省略了关键部分，即useEffect的第二个参数，它决定何时调用setPlayers。

其次，异步代码可能不会像您期望的那样运行，因为 x 的内容在传递给 setPlayers 时是不同步的。您不能在 forEach 中使用异步，因为无法等待所有结果。所以在这种情况下，setPlayers(x) 可能会在 x.push(playerSnap.data()) 之前被调用。

所以最简单的改变就是将useEffect第一个参数改写为

roomData.players.forEach(
  async (playerRef: FirebaseFirestoreTypes.DocumentReference) => {
    const playerSnap = await playerRef.get();
    setPlayers(prevPlayers => [...prevPlayers, playerSnap]);
  }
);

这会异步更新播放器。

如果您需要玩家同步更新，例如只更新一次 UI，或者像在 Firestore 中一样反映玩家的顺序，则必须替换 forEach。一种这样的方法是使用简单的 for 循环来顺序获取。另一种方法是构造一个 promise 数组并将其提供给 Promise.all。

【讨论】：