Question

我有一组查询的文档，按“计数”排序，并听取实时更新。但是，每次更新任何文档（例如“计数”）时，整个文档阵列都会按“计数”重新呈现和重新排序。我想听听更新，但避免每次更新都重新渲染数组。

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

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

我已经考虑过尝试更改查询数据数组的显示方式，但是idk如何在不像我在此处那样先将其放入数组的情况下循环遍历查询的Firestore数据。

Answer 1

如果您修改数组以构建JSX，则它会更改道具，当道具更改时，它将重新呈现组件。您可以： 1）有一个带有布尔值的备忘录，只有在您希望列表重新呈现时才更改

2）或使用将在您的方法中使用的“监听”实时变化的其他变量。

Answer 2

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

viewing changes between snapshots上的文档包含一个很好的示例，说明了如何处理文档更改：

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"，并且您将执行与当前代码相同的操作。但是在随后的更新中，您将仅获得集合/查询实际更改的事件。

如何在Firestore中侦听实时更新而无需在每次更新时都重新呈现查询的数据数组

2 个答案: