firebase onSnapshot在创建完成之前获得更新

我有一个“帖子”，它在

react

中倾听评论的变化，就像这样：

//反应钩子状态
const[comments，setComments]=useState（[]）
//我的听众实际上
db.collection（`users/${userId}/posts/${postId}/comments`）
.onSnapshot（（querySnapshot）=>{
让新来者=[]
querySnapshot.forEach（函数（doc）{
新来者({
id:doc.id，
…文件数据（）
})
})
setComments（新成员）
})

当用户创建新注释时，我设置加载状态并禁用注释部分

//React钩子
常量[isLoading，setLoading]=useState（false）
//添加注释
const addComment=（）=>{
const comment={text:“hello”}
设置保存（真）
db.collection（`users/${postId}/posts/${postId}/comments`）.doc（）
.set（注释）
.然后（（）=>{
设置保存（错误）
})
}

我的问题是（这是一个很好的问题），订阅

onSnapshot

在我的

addComment

回调完成之前获取了新的注释，从而产生了一些视觉问题： -当注释输入仍在加载但注释已经存在时，使应用程序看起来有问题 -如果出现错误（例如：数据库权限问题），注释将显示在列表中，然后消失

在创建完成之前，知道我可以更改什么以不更新

onSnapshot

吗？

如文档中所述：

应用程序中的本地写入将立即调用快照侦听器。 这是因为一个叫做“延迟补偿”的重要特性 当您执行写操作时，您的侦听器将收到新的 将数据发送到后端之前的数据

检索到的文档具有

元数据。hasPendingWrites

属性 指示文档是否具有尚未更改的本地更改 已写入后端

另请参见“聆听集合中的多个文档”中的以下备注：

如上文“本地更改事件”中所述，您将收到 事件立即用于本地写入。您的听众可以使用

metadata.haspending在每个文档上写入

字段以确定 文档中有尚未写入的本地更改 后端

因此，仅当更改已写入后端时，才可以使用此属性显示更改，如下所示（未测试）：

db.collection(`users/${userId}/posts/${postId}/comments`)
   .onSnapshot((querySnapshot) => {
      let newComments = []
      querySnapshot.forEach(function (doc) {
        if (!doc.metadata.hasPendingWrites) {
           newComments.push({
               id: doc.id,
               ...doc.data()
           })
        }
      })
      setComments(newComments)
   })