從實時數據快照中獲取對象數組 - Cloud Firestore

Question

我正在嘗試使用以下代碼從 Cloud Firestore 獲取實時數據。

export const getRealTimeData = () =>
  db
  .collection('posts')
  .onSnapshot(
    (querySnapshot) => {
      const posts: any = [];
      querySnapshot.forEach((doc) =>
        posts.push(Object.assign({
          id: doc.id
        }, doc.data()))
      );
    },
  );
};

而且，我想使用結果數組在 UI 上顯示數據。 當我這樣做時，結果數組是一個函數，而不是實際的數據數組。

const posts = getRealTimeData();

這是我登錄posts時得到的信息

function () {
  i.kT(), o.al(s);
}

誰能指出我哪里出錯了？

Answer 1

使用onSnapshot()添加的實時偵聽器與函數調用的返回值不兼容。 那是因為它們會隨着時間的推移不斷產生新的結果，並且永遠不會真正“返回”任何東西。 在這種情況下，您應該放棄創建同步 getter 類型函數的想法 - 它們只是不適用於您想要做的事情。

理想情況下，您將使用 Redux 之類的架構來管理可用的更新。 您的實時偵聽器會將查詢更新分派到商店，您的組件將訂閱該商店以接收這些更新。

如果你不想使用 Redux（這太糟糕了 - 你真的應該用這種東西），那么你應該將你的查詢包裝在useEffect hook 中，然后讓你的監聽器設置一個 state hook 變量，這樣你的組件就可以接收更新。