Firebase onSnapshot 状态管理问题答案

【问题标题】：Firebase onSnapshot state management issueFirebase onSnapshot 状态管理问题
【发布时间】：2021-04-07 21:53:52
【问题描述】：

我最近遇到了 firebase (onSnapshot) 实时更新问题。问题是 onSnapshot 会在覆盖状态的文档（创建、删除、更新）时更新 state。

换句话说，假设我有一个名为 state 的变量。

let state = null;

// And when I visit (**/homepage**) ,,,, onSnapshot runs.

firebase.collection(someCollection).onSnapshot((snapshot) => {
   state = (we save documents we got from collection in state variable);
})

// I display these documents on the /homepage.

// Now, I click and call a function (orderByTitle)
// this function gets docs from firebase ... ordered by title.

async function orderByTitle(){
  let docs =  await firebase.collection(someCollection).orderBy("title").get();
  state = docs;      // (it overrides the "state" with docs oredered by title & display on page.
}

// Now, I delete one of the docs.
// The problem starts here as it triggers (onSnapshot) again
// and my ("state" variable) gets override with "unordered docs" again.

所以，我的问题是您如何防止 (onSnapshot) 覆盖您当前的状态，或者您是否管理两个不同的状态？如果您管理两种不同的状态，那么您如何从 DOM 中移除使用旧状态的当前元素并强制它们使用其他状态。

【问题讨论】：

Firebase 的部分本质是通过传递给您的应用程序的事件来保持数据的最新状态。因此，如果 Firebase 中的某些内容发生更改，并且您的应用正在观察更改，它将收到该更改的通知 - 这就是您所描述的行为。您还期望它做什么或不做什么？
有没有办法暂停（onSnapshot）一段时间然后再开始？
如果您对接收事件不感兴趣（这本质上就是您所要求的），那么 .onSnapshot 是错误的函数 - getDocuments 更好。如果您只想读取一次数据，请查看入门指南Get Data Once

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

【解决方案1】：

.onSnapshot 函数将在每次数据库发生变化时更新数据，这就是 state 不断变化的原因。

您似乎想读取一次数据。来自文档

您可以使用 onSnapshot() 方法收听文档。一个初始使用您提供的回调调用创建文档快照立即使用单个文档的当前内容。然后，每次内容更改时，另一个调用会更新文档快照

另一方面，如果您想读取一次数据而不是让它不断更新，请使用 .get 函数。这是一次从集合中获取所有文档的示例，没有进一步的通知。

db.collection(someCollection).get().then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
        // doc.data() is never undefined for query doc snapshots
        console.log(doc.id, " => ", doc.data());
    });
});

更多阅读可以在文档Get Data Once中找到

【讨论】：