时间戳

首页 > 解决方案 > 获取时如何避免数据重复？

javascript - 获取时如何避免数据重复？

问题描述

我有一个简单的 fetch 函数，它获取数据（来自 db 的消息）并将其放入数组中以使用简单的 vanilla JS 显示它。问题是我每 2 秒调用一次此函数以检查新消息。但是当我这样做时，我会复制我的消息并且它会不断添加而不是替换。我正在努力理解我应该做些什么来改变，而不是添加。

（有点愚蠢的问题，对不起）

const list = document.getElementById('message-list');

const getData = () => {
  fetch('/messages')
  .then((resp) => resp.json()) 
  .then(function(data) {
    console.log(data)

    for (let i = 0; i < data.length; i++) {

        const listItem = document.createElement('li');
        listItem.innerText = data[i].message;
        const delButton = document.createElement('button');
        delButton.innerHTML = 'Delete';
        delButton.addEventListener('click', ()=>{
          const message_id = data[i].message_id;
          deleteItem(message_id);
        })
      listItem.appendChild(delButton);
      list.appendChild(listItem)
      }
    })
}

setInterval(getData,2000)

标签： javascriptfetch

解决方案

message_id到目前为止，制作一组已处理的s，并在进一步调用时，忽略匹配的消息message_id：

const seenIds = new Set();
const getData = () => {
  fetch('/messages')
    .then((resp) => resp.json())
    .then(function(data) {
      data
        .filter(({ message_id }) => !seenIds.has(seenIds))
        .forEach(({ message, message_id }) => {
          seenIds.add(message_id);
          const listItem = document.createElement('li');
          listItem.innerText = message;
          const delButton = document.createElement('button');
          delButton.textContent = 'Delete';
          delButton.addEventListener('click', () => {
            deleteItem(message_id);
          });
          listItem.appendChild(delButton);
          list.appendChild(listItem)
        });
      });
};

也就是说，更改您的后端可能会更好，以便它可以为您过滤项目，而不是通过网络发送继续被忽略的对象。

推荐阅读