如何通过id过滤指定项？React待办删除handleDelete函数逻辑疑问

代码逻辑逐段解释 #

你贴的是React生态里常见的待办项删除逻辑，完整代码还原如下：

const handleDelete = ({id}) => (
  setTodos(todos.filter((todo) => todo.id !== id))
)

1. 前置背景说明

• todos是存储所有待办项的状态数组，每个待办项都有唯一的id作为身份标识
• setTodos是React useState提供的状态修改方法，只有传入新的数组值，才会触发页面重新渲染

2. 为什么用filter实现删除

JS数组的filter方法的特性是：遍历原数组，返回一个仅包含符合判断条件的元素的新数组，不会修改原数组，刚好匹配React要求的「状态不可变」规范（直接修改原数组不会触发重渲染）。
你要删除的是id匹配的某一项，反过来逻辑就是「保留所有id不匹配的项」，过滤完成后得到的新数组自然就移除了要删除的待办项。 #

实际运行示例

假设当前todos的值为：

[
  {id: 1, content: "整理桌面"},
  {id: 2, content: "买牛奶"},
  {id: 3, content: "提交周报"}
]

当你点击删除id为2的「买牛奶」待办时，调用handleDelete({id: 2})，filter会逐一遍历每一项：

• 待办1：1 !== 2 → 符合条件，保留
• 待办2：2 !== 2 → 不符合条件，被过滤
• 待办3：3 !== 2 → 符合条件，保留

最终得到的新数组是[{id:1, content:"整理桌面"}, {id:3, content:"提交周报"}]，setTodos把这个新数组更新为状态后，页面就会渲染出删除后的待办列表。

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