Javascript 使用钩子更新Firebase实时数据库中的数据

每当列表更新时，它就会形成另一个数组，添加到以前的数组中，如何使其仅返回一个包含更新信息的数组

下面是代码

useEffect(() => {
    firebase.database().ref('/users/' + '/messages/').orderByChild('createdAt').on('value', function(snapshot) {
        snapshot.forEach(function(userSnapshot) {
            const id = userSnapshot.key;
            const userData = userSnapshot.val();
            setId(id);
            messages.push(userData);
        });
    });

    setMessages(messages);

}, [messages])

体内用法

<ul>
    {messages.map(function(item){
         return (<li key={id}>{item.displayName}: {item.text}</li>)
       })}
</ul>  

{messages.map（函数（项）{
返回（
{item.displayName}:{item.text}
）
})}

---

当列表更新一次时，它会返回两个以上的列表，因此新列表变得非常长

我想您正在寻找：

firebase.database().ref('/users/' + '/messages/').orderByChild('createdAt').on('value', function(snapshot) {
    messages = []; // clear existing messages
    snapshot.forEach(function(userSnapshot) {
        const id = userSnapshot.key;
        const userData = userSnapshot.val();
        setId(id);
        messages.push(userData);
    });
    setMessages(messages);
});

这里的变化是：

• 在向数组中添加更新的项之前，请清除

  消息

  数组
• 现在在回调中调用

  setMessages

  ，以确保在数据库的最新数据位于

  messages

  中时调用它

---

我想你在寻找：

firebase.database().ref('/users/' + '/messages/').orderByChild('createdAt').on('value', function(snapshot) {
    messages = []; // clear existing messages
    snapshot.forEach(function(userSnapshot) {
        const id = userSnapshot.key;
        const userData = userSnapshot.val();
        setId(id);
        messages.push(userData);
    });
    setMessages(messages);
});

这里的变化是：
• 在向数组中添加更新的项之前，请清除

  消息

  数组
• 现在在回调中调用

  setMessages

  ，以确保在数据库的最新数据位于

  messages

  中时调用它

---

如果您的消息是一个状态变量，则永远不要直接更改它， 你应该做的是

const newMessages = Array.from(messages);
snap.forEach(message => newMessages.push(message))
setMessages(newMessages);

---

当然，如果快照包含所有消息，那么您可以将newMessages初始化为空数组
如果消息是一个状态变量，您永远不应该直接更改它， 你应该做的是

const newMessages = Array.from(messages);
snap.forEach(message => newMessages.push(message))
setMessages(newMessages);

---

但是当然是快照包含了你所有的消息，那么你可以将新消息初始化为一个空数组
我想这是因为.push（），有没有其他方法可以替代它？我想是因为.push（），有没有其他方法可以替代它呢？谢谢你的反馈，它很有效，因为这是jsx，当我使用

constmessages=[]时，它就起作用了非常感谢您的反馈，它起作用了，因为这是jsx，当我使用
const messages=[]时它起作用了