使用钩子从 Firebase 实时数据库 ReactJs 更新数据答案

【问题标题】：Updating data from Firebase Realtime Database ReactJs using hooks使用钩子从 Firebase 实时数据库 ReactJs 更新数据
【发布时间】：2020-09-28 20:40:48
【问题描述】：

每当列表更新时，它会形成另一个数组，添加到前一个数组中，我怎样才能让它只返回一个包含更新信息的数组

下面是代码

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>

当列表更新一次时，它又返回了两个列表，所以新的列表变得非常非常长

【问题讨论】：

我认为是因为 .push()，有没有其他替代方法

标签： javascript arrays reactjs react-native firebase-realtime-database

【解决方案1】：

我想你正在寻找：

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

这里的变化：

先清除messages 数组，然后再向其中添加更新的项目。
现在调用setMessagesinside回调，以确保当数据库中的最新数据在messages中时调用它。

【讨论】：

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

【解决方案2】：

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

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

当然是 snap 包含你所有的消息，那么你可以将 newMessages 初始化为一个空数组

【讨论】：