为什么firebase数据库的javascript循环函数结果会不断复制自己

Question

我有一个Javascript循环函数

 firebase.auth().onAuthStateChanged((user) => {
  if (user) {
        database = firebase.database();

      var BusinessesId = firebase.auth().currentUser.uid;
      var ref = database.ref('/Jobs/');
    ref.on('value', ApplicationData,  errData);

  }
  })

         function JobData(data) { 

              var container = document.getElementById('Jobs'); 

              data.forEach(function(JobSnap) { // loop over all jobs
                var key = JobSnap.key;
                var Jobs = JobSnap.val();
                var newCard = `
                       <div class="thumbnail" id="${key}">
                           <span class="folder"><span class="file"></span></span>
                           <div class="title" id="Jobs">${Jobs.JobTitle}</div>
                        </div>
                    `;
              container.innerHTML += newCard;
              console.log(key);
              })
            }

显示此信息

我注意到，每当我离开页面几个小时，文件夹就会成倍增加。就像一切都重复了一样。我离开它的时间越长，检索到的数据就越复制。例如，如果我离开网页并离开大约一个小时左右，那么当我回来时，它们将是下面显示的每个文件夹的两个副本。造成这种情况的原因是什么？如何阻止它？

Answer 1

你正在调用此事件的函数，所以我的猜测，状态再次改变并再次调用。

firebase.auth().onAuthStateChanged()

然后将缩略图附加到容器

container.innerHTML += newCard;

您可以像这样重置内容

var container = document.getElementById('Jobs'); 
container.innerHTML = '';

或查看为什么会再次触发事件.onAuthStateChanged（）。