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

Question

我有一个简单的提取函数，该函数获取数据（来自db的消息）并将其放入数组中，以使用简单的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）

Answer 1

设置到目前为止已处理的message_id的集合，并在进一步调用时忽略与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)
        });
      });
};