firebase onSnapshot 在创建完成之前获取更新答案

【问题标题】：firebase onSnapshot gets update before create is completefirebase onSnapshot 在创建完成之前获取更新
【发布时间】：2020-08-06 22:48:47
【问题描述】：

我有一个“帖子”，它在react 中监听其 cmets 的变化，如下所示：

// React hook state 
const [comments, setComments] = useState([])

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

当用户创建新的 cmets 时，我设置了加载状态并禁用了评论部分

// React hook
const [isLoading, setLoading] = useState(false)
// Add comment
const addComment = () => {
   const comment = {text:"hello"}
   setSaving(true)
   db.collection(`users/${postUid}/posts/${postId}/comments`).doc()
      .set(comment)
      .then(()=>{
         setSaving(false)
      })
}

我的问题是（一个很好的问题），订阅onSnapshot 在我的addComment 回调完成之前获得了新评论，造成了一些视觉问题： - 当评论输入仍在加载但评论已经存在时，使应用程序看起来有问题 - 如果出现错误（例如：数据库权限问题），评论会出现在列表中然后消失...

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

【问题讨论】：

标签： firebase google-cloud-firestore

【解决方案1】：

正如文档中的here 所述：

应用中的本地写入将立即调用快照侦听器。这是因为一个称为“延迟补偿”的重要功能。当您执行写入时，您的听众将收到新的通知数据发送到后端之前的数据。

检索到的文档有一个metadata.hasPendingWrites 属性指示文档是否具有尚未进行的本地更改写到后端呢。

另见“收听集合中的多个文档”section中的以下注释：

如上文有关本地更改的事件中所述，您将收到立即为您的本地写入事件。您的听众可以使用 metadata.hasPendingWrites字段上的每个文档来判断是否该文档具有尚未写入的本地更改后端。

因此，只有当更改已写入后端时，您才能使用此属性来显示更改，如下所示（未经测试）：

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)
   })

【讨论】：