javascript - 使用 firebase .on() 刷新页面后，仅从 firebase 获取最后的数据

Question

我在使用 firebase Realtime DB 时遇到了一个奇怪的问题。问题出在聊天组件上。

 componentDidMount(){
  this.renderMessages();
 }

renderMessages(){
rdb.ref("chats/"+this.props.id).orderByChild("time").on('child_added',   (snapshot)=>{
             if(snapshot.exists)
            {
                this.setState({messages [...this.state.messages,snapshot.val()]})
            }

    })
}

然后映射此状态并将数据传递给其他组件，第一次运行时一切正常。

控制台对象第一次运行时[它是一个对象数组]

   0: Object { message: "hello", read: false, sender: "Shan", … 
   1: Object { message: "Hai Shan", read: false, sender: "AashiqOtp", … }
   2: Object { message: "hi", read: false, sender: "AashiqOtp", … }  

当我返回并重新进入组件时，它只显示数组的最后一个对象 即

0: Object { message: "hi", read: false, sender: "AashiqOtp", … }

有什么问题吗？有人可以帮我吗？提前致谢。

已更新

我正在使用“.once”事件监听器，没有任何问题，但由于它是一个聊天组件，我需要始终监听该事件。

Answer 1

这是与状态更新速度不够快相关的问题。如果您的新状态基于旧状态，您应该使用更新程序函数。

此外，您不应在 forEach 中多次调用 this.setState ，而应一次添加整个数组，以避免许多不必要的重新渲染和此类问题一个

renderMessages(){
    rdb.ref("chats/"+this.props.id).on('value', (snapshot) => {
        this.setState(prevState => ({
            messages: [
                ...prevState.messages, 
                ...snapshot
                    .filter((childsnap) => childsnap.exists)
                    .map((childsnap) => childsnap.val())
            ]
        }))
    })
}

由于您更改了问题中的事件，因此无法一次添加整个数组，您必须使用效率较低的方法:

renderMessages(){
    rdb.ref("chats/"+this.props.id).orderByChild("time").on('child_added', (snapshot) => {
        if (snapshot.exists) {
            this.setState(prevState => ({
                messages: [
                    ...prevState.messages, 
                    snapshot.val()
                ]
            }))
        }
    })
}