Question

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

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

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

有谁知道为什么会这样？

Answer 1

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

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

Answer 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

Answer 3

on(value, () => {})侦听器被触发两次的原因是它通过首先获取并返回当前值来操作，然后在每次后续数据库条目更改时触发 - 如果你想要做的就是获取当前值，然后你可以使用@Peter Haddad所描述的方法。

值得注意的是，Firebase保留了以下内容，如documentation所示：

值事件始终在最后触发，并保证包含来自该快照之前发生的任何其他事件的更新服用。

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

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

3 个答案: