React待办列表删除功能异常：点击删除项却删除其他条目

嘿，我之前做React TodoList的时候也踩过类似的坑，结合你描述的情况——点击删除目标条目反而删掉了其他所有项，而且控制台能输出正确对象，大概率是key值不唯一或者删除逻辑写反了，咱们一步步排查：

首先排查key值问题 #

React渲染列表时，完全依赖唯一的key来识别每个列表项的身份。如果你的key用了列表的index（数组下标），或者用了重复的值，当你删除某一项后，React会搞混元素的对应关系，导致错误的更新。

举个反例：

// 错误：用index当key，删除项后后续项的index会前移，React会误判
todos.map((todo, index) => (
  <li key={index}>
    {todo.text}
    <button onClick={() => handleDelete(todo.id)}>删除</button>
  </li>
))

正确的做法是用每个待办项唯一的标识当key，比如每个todo自带的id字段：

// 正确：用todo的唯一id当key
todos.map(todo => (
  <li key={todo.id}>
    {todo.text}
    <button onClick={() => handleDelete(todo.id)}>删除</button>
  </li>
))

然后检查删除逻辑的过滤条件 #

你说控制台能输出正确的目标对象，说明点击事件传递的参数是对的，但删除时的过滤逻辑很可能写反了！比如你不小心把!==写成了===，这样就会只保留目标项，删掉其他所有项，刚好和你遇到的情况一致。

错误的删除逻辑：

const handleDelete = (targetId) => {
  // 这里条件写反了，会留下目标项，删掉其他所有项
  setTodos(todos.filter(todo => todo.id === targetId));
};

正确的删除逻辑应该是：

const handleDelete = (targetId) => {
  // 过滤掉目标id的项，保留其他所有项
  setTodos(todos.filter(todo => todo.id !== targetId));
};

最后检查事件绑定的参数 #

还要确认删除按钮的点击事件里，传递的是当前项的id，而不是其他错误的值。比如有没有不小心写成了整个todos数组的id（如果有的话），或者其他变量：

错误的绑定：

<button onClick={() => handleDelete(todos.id)}>删除</button> {/* 错传了数组的id，不是当前todo的id */}

正确的绑定：

<button onClick={() => handleDelete(todo.id)}>删除</button> {/* 传递当前todo的唯一id */}

按照这三步排查，应该就能解决你的问题啦！

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