React Native-Firebase数据更新中的数据重复

时间:2018-06-25 20:42:01

标签: javascript reactjs firebase react-native

我在应用程序中使用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));
            }

        });

    })
};

1 个答案:

答案 0 :(得分:0)

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