React列表项删除代码解析：person.id !== id的作用原理

核心逻辑拆解：filter方法 + 状态更新 #

你困惑的person.id !== id是JavaScript数组filter方法的筛选条件，整个删除逻辑分两步：

1. 用filter生成不包含目标项的新数组
   JavaScript的Array.filter()方法会遍历原数组的每一项，对每一项执行你传入的判断函数：

   • 如果判断函数返回true，当前项会被保留到新数组里
   • 如果返回false，当前项会被排除在新数组外
     原数组不会被修改，完全是生成一个全新的数组。

   对应你的代码：当点击某个项的「remove」按钮时，会把该条目的id传入removeItem函数。people.filter((person) => person.id !== id)就是遍历people数组里的每一个对象，只保留那些id不等于要删除的id的对象，等于目标id的那个对象就被过滤掉了，最终newPeople就是原数组去掉目标项后的新数组。

2. 用setPeople更新React状态
   React的状态是不可直接修改的，所以不能直接从people数组里删掉元素。必须通过setPeople(newPeople)把新数组赋值给状态，触发组件重新渲染。组件重新渲染时，people.map()会基于新的数组生成UI，被删除的项自然就从页面上消失了。

举个例子帮你理解 #

假设people初始数组是：

[
  {id: 1, name: '张三'},
  {id: 2, name: '李四'},
  {id: 3, name: '王五'}
]

当你点击李四的remove按钮，传入id=2，filter会遍历每一项：

• 张三的id=1 !== 2 → 保留
• 李四的id=2 !== 2 → 返回false，被排除
• 王五的id=3 !== 2 → 保留

最终newPeople就是[{id:1, name:'张三'}, {id:3, name:'王五'}]，用setPeople更新状态后，页面就只显示张三和王五的条目了。

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