firestore 使用旧文档重新渲染更新的文档

Question

我正在尝试获取消息集合中的任何文档并将它们呈现出来。但例如。如果有 1 个文档，它将显示该文档，但是如果我更改该文档的任何值，它将重新渲染但不会替换旧文档，因此它会创建一个新元素来渲染并且不会删除未更新的旧元素. 我已经给出了下面的代码。请帮忙。

const ref = firebase.firestore().collection("messages")

useEffect(() => {
let items = [];
ref.onSnapshot((querySnapshot) => {
  querySnapshot.forEach((doc) => {
    items.push(doc.data());
  });
  
  items.forEach((item) => {
    console.log(item);
    document.getElementById("postDisplay").innerHTML += `
    <div class="post">
    <h1>${item.title}</h1>
    <p>${item.desc}</p>
    </div>
    `
  })


});}, [])

Answer 1

将您的 items 数组初始化移动到 .onSnapshot() 内，因为每次内容更改时，另一个调用都会更新文档快照，并且新数据会被推送到 items 数组。

const ref = firebase.firestore().collection("messages")

useEffect(() => {
  ref.onSnapshot((querySnapshot) => {

    let items = [];
    querySnapshot.forEach((doc) => {
      items.push(doc.data());
    });

    items.forEach((item) => {
      console.log(item);
      document.getElementById("postDisplay").innerHTML += `
    <div class="post">
    <h1>${item.title}</h1>
    <p>${item.desc}</p>
    </div>
    `
    })


  });
}, [])