Firebase child_added事件侦听器返回重复数据 [英] Firebase child_added event listener returning duplicate data

问题描述

我正在使用Firebase child_added监视正在添加到数据库中的新条目.

I am using Firebase child_added to watch for new entries being added to my database.

它似乎工作了一段时间，但是当我保持连接空闲时，我注意到了一些问题.如果Firebase返回重复项时，我的应用程序长时间处于打开状态.我认为可能是由于断开连接然后建立连接.

It seemed to work for a while but then I noticed some issues when leaving the connection idle. If I leave my app open for a prolonged period of time when Firebase returns duplicates. I think it maybe down to the connection being dropped and then established.

这是我的代码.

getVoicemailList: function() {
    var self = this;
    var userId = firebase.auth().currentUser.uid;       
    firebase.database().ref('voicemails/' + userId).on('child_added', function(snapshot) {
         var voicemail = snapshot.val();
         self.addToCollection(voicemail.callerID, voicemail.timeReceived, voicemail.transcription, voicemail.audioURL);
    });
},

addToCollection: function(callerID, timeReceived, transcription, audioURL) {
    console.log(callerID)
    var collectionList = $('.collapsible').length;

    if(!collectionList) {
        $('#main-content').append('<ul class="collapsible" data-collapsible="accordion"></ul>')
    }

        var output = '<li>';
        output +=  '<div class="collapsible-header"><i class="material-icons">filter_drama</i>'+callerID+'</div>';      
        output += '<div class="collapsible-body">';
        output += '<p><audio id="source" controls>';            
        output += '<source src="'+audioURL+'" type="audio/mpeg">';
        output += '</audio></p>';
        output += '<p>'+timeReceived+'</p>';
        output += '<p>'+transcription+'</p>';   
        output += '</div>';     
        output += '</li>';
        $('.collapsible').append(output);
        $('.collapsible').collapsible();
},

推荐答案

如果我正确理解了您的问题，那么我已经遇到过几次.我相信诀窍是从.on调用内.empty()现有数据.

If I understand your issue correctly, then it's something I've come across a few times. I believe the trick is to .empty() the existing data from within the .on call.

例如，在我的网站上，我们有用户可以添加的目标.当他们添加新的 Goal 时，.on调用会将新的 Goal 添加到其列表的底部.

As an example, on my site we have goals that users can add. When they add a new Goal the .on call adds a new Goal to the bottom of their list.

我遇到一个问题，那就是删除 Goal 然后会复制UI数据.

I was having an issue where deleting a Goal would then duplicate the UI data.

为了解决该问题，我将$(#goals").empty();移到了.on调用内.

In order to address the issue, I moved $(#goals").empty(); to within the .on call.

  firebase.database().ref('users/' + user).on('value', function(snapshot) {
    $("#goals").empty(); // This removes all all previously added goals

    snapshot.forEach(function(data) {
        var id = data.key;
        var desc = data.val().desc;
        var url = data.val().url || "https://unsplash.it/400?image=" + getRandomNumber();
        displayGoal(id,desc,url);
    });
// If you need to append anything after all the data has been added you can do it here. e.g. $("#goals").append("</div>");
  });

我怀疑这样做会强制重新加载所有相关的UI项，但它们不会.如果添加 Goal ，它只会弹出列表的底部，如果删除 Goal ，则UI会删除目标，而无需重新加载或复制.

I suspected that doing this would force all relevant UI items to reload but they don't. If I add a Goal it just pops up on the bottom of the list, if I remove a Goal the UI just removes the goal without any reloading or duplication.

因此，在您的情况下，应在.on调用之后和var voicemail = snapshot.val();之前添加$('.collapsible').empty();.

So in your case you would add $('.collapsible').empty(); after the .on call and before var voicemail = snapshot.val();.

注意:以前，我会在.on调用之前先调用$("#goals").empty().

Note: Previously I would call $("#goals").empty() prior to the .on call.

这篇关于Firebase child_added事件侦听器返回重复数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！