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

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 将继续侦听数据库的更改，并在有人发布或编辑评论时自动更新评论。