Javascript Firebase只使用一个元素填充聊天列表

我创建了这个聊天室应用程序，它引用了“Friendlychat web”。问题是只有实时数据库中最新的项正在填充

代码的要点可在此处找到：

var query=firebase.database（）.ref（“消息”）；
函数loadMessages（）{
document.getElementById（“消息列表”）.innerHTML=“”；
on（“值”，异步快照=>{
if（snapshot.val（））{
等待Object.keys（snapshot.val（））.forEach（异步键=>{
document.getElementById（“消息列表”）.innerHTML+=generateMessage（wait snapshot.val（）[key]）；
});
}否则{
document.getElementById（“消息列表”）.innerHTML=“”；
document.getElementById(
“邮件列表”
).innerHTML+=`
还没有消息
`；
}
});
}
函数authStateObserver（用户）{
loadRoomMembers（）；
loadMessages（）；
如果（用户）{/*…操作…*/}
}

聊天功能可以正常工作，直到您刷新

刷新前：

刷新后：

---

代码本身看起来应该可以工作。但是，您在消息上循环的方式是非惯用的，因此很难发现其中的错误。循环查看结果的更好方法是像这样使用

Snapshot.forEach（）

：

function loadMessages() {
  query.on("value", snapshot => {
    let list = document.getElementById("messages-list");
    if (snapshot.val()) {
      list.innerHTML = "";
      snapshot.forEach(messageSnap => {
        list.innerHTML += generateMessage(messageSnap.val());
      });
    } else {
      list.innerHTML += `<li class="center"> No Messages yet</li>`;
    }
  });
}

函数加载消息（）{
on（“值”，快照=>{
let list=document.getElementById（“消息列表”）；
if（snapshot.val（））{
list.innerHTML=“”；
snapshot.forEach（messageSnap=>{
list.innerHTML+=generateMessage（messageSnap.val（））；
});
}否则{
list.innerHTML+=`
还没有消息
`；
}
});
}

---

请注意，我还删除了

async

和

wait

，因为您的代码似乎不需要它，它只会引入更多的错误空间。

在我看来，它应该可以工作，但如果您的保存消息功能被破坏，并替换消息，而不是将其添加到列表中，您将拥有此组件。也许尝试将forEach的结果聚合成一个字符串，每次都用它完全替换innerHtml。你会发现这是写作还是其他方面的问题。

function loadMessages() {
  query.on("value", snapshot => {
    let list = document.getElementById("messages-list");
    if (snapshot.val()) {
      list.innerHTML = "";
      snapshot.forEach(messageSnap => {
        list.innerHTML += generateMessage(messageSnap.val());
      });
    } else {
      list.innerHTML += `<li class="center"> No Messages yet</li>`;
    }
  });
}