如何在 Firestore 中监听实时更新，而无需在每次更新时重新渲染查询的数据数组

Question

我有一个正在查询的文档集合，按“计数”排序，并收听实时更新。然而，每次任何文档（例如“count”）更新时，整个文档数组都会按“count”重新呈现和重新排序。我想监听更新，但避免每次更新都重新渲染数组。

这是我提出的请求的简化版本。“queriedData”是我将在 JSX 中循环的内容。

 useEffect(() => {
    const unsubscribe = firebase
      .firestore()
      .collection("someCollection")
      .orderBy("count", "desc")
      .onSnapshot(collection => {
        const newArray = [];
        collection.forEach(document => {
          const { name, count } = document.data();
          newArray.push({
            key: document.id,
            name,
            count
          });
        });
        setQueriedData(newArray); // <-- array in the JSX
      });
    return () => {
      unsubscribe();
    };
  }, [queriedData]);

我想过尝试改变呈现查询数据数组的方式，但不知道如何循环查询 Firestore 数据，而不是像我在这里所做的那样先将其放入数组中。

Answer 1

回调onSnapshot给你一个QuerySnapshot. 该对象不仅包含您请求的文档，还包含一个docChanges方法，它为您提供有关确切更改的更多信息。

有关查看快照之间的更改的文档包含如何处理文档更改的一个很好的示例：

db.collection("cities").where("state", "==", "CA")
.onSnapshot(function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
        if (change.type === "added") {
            console.log("New city: ", change.doc.data());
        }
        if (change.type === "modified") {
            console.log("Modified city: ", change.doc.data());
        }
        if (change.type === "removed") {
            console.log("Removed city: ", change.doc.data());
        }
    });
});

最初，当回调运行时，您将获取change.type === "added"每个文档，并且您将执行与当前代码中相同的操作。但在后续更新中，您只会获取集合/查询实际更改的事件。