使用dataset属性调用filter方法时数组未更新的问题求助

下面是针对你遇到的数组过滤无效问题的常见排查和解决方法：

• 类型不匹配导致匹配失败
  dataset获取到的所有值都是字符串类型，如果你的Book实例里id是数字类型，直接用===比较会因为类型不同匹配不上。修正方式：

  // 把dataset.id转为数字后再比较
  const targetId = Number(this.dataset.id);
  books = books.filter(book => book.id !== targetId);
  

• 过滤逻辑写反
  如果是要删除指定项，过滤时应该保留不等于目标id的元素，而不是保留等于的。比如：

  // 错误：留下了要删除的项，等于没删
  books = books.filter(book => book.id === targetId);
  // 正确：移除目标项，保留其余内容
  books = books.filter(book => book.id !== targetId);
  

• 事件中this指向错误
  如果用箭头函数绑定点击事件，this不会指向触发按钮，导致拿不到正确的dataset。可以改用event.target获取触发元素：

  deleteBtn.addEventListener('click', (e) => {
    const targetId = Number(e.target.dataset.id);
    books = books.filter(book => book.id !== targetId);
    // 数组更新后必须重新渲染页面
    renderBooks();
  });
  

• 忘记重新渲染DOM
  就算数组已经更新，如果没有重新执行遍历渲染的函数，页面不会同步变化，看起来就像数组没改动。修改数组后一定要调用你的动态渲染方法，把新的数组内容展示出来。

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