Javascript 如何在获取数据时避免数据重复？

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

（一个小问题，对不起）

const list=document.getElementById（'message-list'）；
常量getData=（）=>{
获取（“/messages”）
.然后（（resp）=>resp.json（））
.then（功能（数据）{
console.log（数据）
for（设i=0；i{
const message_id=数据[i]。message_id；
删除项（消息\u id）；
})
listItem.appendChild（delButton）；
list.appendChild（listItem）
}
})
}

---

setInterval（getData，2000）

制作一组迄今为止已处理的

消息id

，在进一步调用时，忽略与

消息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)
        });
      });
};

---

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

您可以调用

list.appendChild（listItem）

，它将每次添加。如果要替换，您需要清除

列表

。将数据保存在单独的对象中，在提取并过滤掉所有重复项后，清空

消息列表

，并从该对象填充数据。您可以控制该系统的多少？一种解决方案是获取例如

/messages？因为=…

，带有时间戳或您知道的最新消息的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)
        });
      });
};