React Native - firebase 数据更新时的数据重复

Question

我在应用程序中使用 React Native 和 firebase，我使用“on”来监听数据库更改，但是每当数据更新时，我的数据就会翻倍（获取每个对象的副本）。我尝试在 forEach 循环之前重置数据，但它在最后一次迭代中返回空数据。我之前使用数组，然后尝试使用 Set，但结果仍然相同。任何帮助将不胜感激。谢谢

这是我的代码：

friendPost = () => {
    let that = this;
    let res = new Set();

    firebase.database().ref("/Manifest User/"+this.state.currentUsername.charAt(0).toUpperCase()+ "/"+
        this.state.currentUsername+"/Friends").on("value", function (snapshot) {
        // let result=[];
        snapshot.forEach(function (childSnapshot) {
            if(childSnapshot.key !== 'Friend Requests'){
                res=[];
                firebase.database().ref("/Manifest User/"+childSnapshot.key.charAt(0).toUpperCase()+"/"+childSnapshot.key
                    +"/Profile Posts/").on("value", function (postSnapshot) {

                    postSnapshot.forEach(function(miniSnapshot){
                        if(miniSnapshot.key !== '~default') {
                            let url;
                            let urlTemp = miniSnapshot.val().post.match(/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/);

                            if (urlTemp !== null){
                                url = urlTemp[0];
                                if (urlTemp[0].includes("youtu")) {

                                    url = "https://www.youtube.com/embed/"+urlTemp[0].substr(urlTemp[0].lastIndexOf("/")+1);
                                }
                                else if (urlTemp[0].includes("vimeo.com")){
                                    url = "https://player.vimeo.com/video/"+urlTemp[0].substr(urlTemp[0].lastIndexOf("/")+1);
                                }
                            }

                            let postString = miniSnapshot.val().post
                                .replace(/(http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?/, '');

                            res.push({
                                postDate: miniSnapshot.key,
                                postImage: miniSnapshot.hasChild('postImage') ? miniSnapshot.val().postImage : '',
                                post: postString,
                                username: miniSnapshot.hasChild('postUserName') ? miniSnapshot.val().postUserName : '',
                                comments: miniSnapshot.hasChild('postComments') ? miniSnapshot.val().postComments : [],
                                likes: miniSnapshot.hasChild('postLikes') ? miniSnapshot.val().postLikes : [],
                                url: url,
                                actualPostString: miniSnapshot.hasChild('post') ? miniSnapshot.val().post : '',

                            });
                        }

                    });
                    // alert(JSON.stringify(res))
                    that.setState({friendPosts: Array.from(res)});

                }.bind(this));
            }

        });

    })
};

Answer 1

发生这种情况的一个原因是您的组件重新渲染。您调用此函数的代码被调用两次，即在重新渲染时。