javascript - 意外的 Firestore 集合快照 docChanges() 行为

Question

我将侦听器设置为这样的 firebase 集合：

useEffect(() => {
    let data:IFirebaseProject[] = [];
    //console.log(data);
    console.log('SUBSCRIBED');
    const unsubscribe = firebase
      .firestore()
      .collection("projects")
      .onSnapshot((snapshot) => {
        let changes = snapshot.docChanges();
        console.log(changes); // LOG 1
        changes.forEach(change => {
          if (change.type === "added") {
            data.push({
              id: change.doc.id,
              ...change.doc.data()
            } as IFirebaseProject);
            console.log('ADDED', {...change.doc.data()}); // LOG 2
          } else if (change.type === "removed") {
            const removeIndex = data.map(function(project) { return project.id; }).indexOf(change.doc.id);
            data.splice(removeIndex,1)
            console.log('REMOVED')
          }
        });
      setProjects([...data]);
      console.log('projects set');  
    });

当我删除记录时console.log('REMOVED')，按预期出现一次。但是当我添加一条记录时，console.log('ADDED', {...change.doc.data()});会出现添加的记录，然后出现添加前的记录次数。因此，例如，如果我有两条记录，并添加第三条，我将获得以下日志序列：

我希望只添加一项更改和一条记录，而不是像记录一样多的更改。先前未添加的记录不会添加到数据库中，而是视为快照中添加的更改并合并到状态中。

我尝试了两种方法将我的组件链接到firestore，使用redux和react hooks并且行为是相同的，但是这对我来说是出乎意料的，因为对于更大的数据库似乎不是很有效，我希望当前的数据库状态以某种方式被chached。

这是正常行为还是应该只是添加记录并且我的代码有问题时的一次更改？

标签： javascriptreactjsfirebasegoogle-cloud-firestore