添加新评论重复呈现的评论

Question

所以，我正在尝试使用 firebase 来创建 React 的评论部分。

数据库结构如下：

基本上发生的事情是：

 

它只是再次加载已经加载的评论！

我试图在调用retrieveComments/useEffect/handleSubmit时清空评论状态，但没有成功，我不知道发生了什么:(

Answer 1

当您在 Firebase 中监听某个值时，每次调用回调时，它都会获取该位置所有数据的完整快照。因此，预计第二次您会收到新消息 ** 以及已经存在的所有消息。因此，您需要忽略comments状态中的当前值，并始终仅使用数据库中的信息来填充它：function retrieveComments(){    if(props.location.project){        var comments = firebase.database().ref('/projects/'+props.location.project.uid + '/' + props.location.project.pid+'/comments');        comments.once('value', (snapshot)=>{            let msgs = [];            snapshot.forEach((snap)=>{                msgs.push(snap.val());            })            setComments(comments => msgs);        })    }}顺便说一句：我建议使用on()(而不是once())，因为这意味着 Firebase 将继续侦听数据库的更改，并在有人发布或编辑评论时自动更新评论。