Firebase Realtime Database数据重复求助：插入新数据时表格全量重复

问题核心是未在每次数据更新时重置表格内容容器，加上onValue是实时监听机制，数据库数据变化就会触发回调，旧的表格内容被持续累加，最终导致重复显示。

修复后的代码 #

function fetchData() {
  const dbRef = query(
    ref(database, "vote/"),
    orderByChild("department"),
    equalTo(getUrlParameter("department"))
  );

  onValue(dbRef, (snapshot) => {
    let tbody = ""; // 每次回调触发时重置为空，重新生成完整表格内容
    snapshot.forEach((childSnapshot) => {
      const childData = childSnapshot.val();
      tbody += `<tr>
        <td>${childData.judgeName}</td>
        <td>${childData.score1}</td>
        <td>${childData.score2}</td>
        <td>${childData.score3}</td>
        <td>${childData.score4}</td>
        <td>${childData.score5}</td>
      </tr>`;
    });

    $(".list").html(tbody);
  });
}

fetchData();

关键修复说明 #

• 将tbody的初始化移到onValue回调内部，确保每次数据更新时都从空字符串开始拼接新的表格行，彻底避免旧内容累加。
• 移除了无用的const data = snapshot.val();代码，清除冗余逻辑。

原代码中，tbody定义在回调外部且未初始化为空，第一次拼接时会带入undefined字符串，后续每次数据变化还会重复追加所有历史内容，最终造成表格重复渲染。修改后每次都会根据最新的数据库快照生成完整表格，再替换页面上的内容，从根源解决重复问题。

内容的提问来源于stack exchange，提问作者Multimedia