React 和 Firebase：向数据库添加日期会导致侦听器触发两次？答案

【问题标题】：React and Firebase: adding date to database causes listener to trigger twice?React 和 Firebase：向数据库添加日期会导致侦听器触发两次？
【发布时间】：2023-04-08 11:49:02
【问题描述】：

我有一个非常简单的聊天应用程序。提交后，它会使用用户名和消息更新数据库。

this.ref.child("/chat").update({username: this.state.username, 
    message: this.state.chatMessage});

然后我使用 ref.on('value',()) 来获取新的聊天并将其存储在一个数组中。

this.chat.on('value',(snapshot) => {
    console.log('triggered')
    let newMessage = {username:snapshot.val().username, message: snapshot.val().message}
    this.setState({chatArray: [...this.state.chatArray,newMessage]})
})

我试图想出一种解决方法来获取重复的消息（即再次输入相同的消息，因为如果没有任何更改，则不会触发侦听器）所以我想将一个日期对象添加到数据库中。当我使用

将日期添加到数据库时

let d = new Date();
this.ref.child("/chat").update({username: this.state.username, 
    message: this.state.chatMessage, time: d});

当我写东西并提交它时，事件监听器开始被触发两次。提交聊天的用户会收到两次相同的消息，而另一个用户只会收到一次。删除日期解决了问题。

有人知道为什么会这样吗？

【问题讨论】：

标签： javascript reactjs firebase firebase-realtime-database

【解决方案1】：

Firebase 数据库存储了 JSON，而Date 不是有效的 JSON 类型。惯用的做法是存储一个时间戳：

this.ref.child("/chat").update({username: this.state.username, 
    message: this.state.chatMessage, time: Date.now()});

【讨论】：

【解决方案2】：

改变这个：

this.chat.on('value',(snapshot) => {

进入这个：

this.chat.once('value').then((snapshot)=> {

这种方式只会触发一次，更多信息在这里：

https://firebase.google.com/docs/database/web/read-and-write#read_data_once

【讨论】：

【解决方案3】：

on(value, () => {}) 监听器被触发两次的原因是它首先获取并返回当前值，然后在每次后续数据库条目更改时触发 - 如果您只想获取当前值，那么您可以使用@Peter Haddad 描述的方法。

需要注意的一点是，Firebase 保证以下内容，如他们的documentation 所示：

值事件总是最后触发并保证包含在该快照之前发生的任何其他事件的更新采取了。

这意味着，如果您在调用更新数据库条目后调用once(value, () => {})，则可以保证更新已经发生，并且侦听器中返回的数据包括更新。

【讨论】：