为什么我这种React Hooks写法无法删除状态中的用户对象？

问题原因 #

你写的失效版DeleteUser不生效的核心原因是对Array.filter()的方法特性理解错误：

• JavaScript的filter()方法不会修改调用它的原数组，只会返回一个全新的、符合筛选规则的数组。你在代码中只执行了updated.filter(el => el.id !== user.id)，但没有接收这个方法返回的新数组，最后返回的还是最开始拷贝的原列表updated，相当于没有对state做任何修改，自然不会触发页面更新。

你觉得它和AddNewUser逻辑一致其实是误解：

• AddNewUser里用到的unshift()是会直接修改原数组的突变方法，你把之前的state拷贝到updatedList之后调用unshift，updatedList本身就被修改了，所以返回之后是可以生效的。

补充优化建议 #

在React的state更新逻辑里，更推荐避免使用unshift、push、splice这类会修改原数组的突变方法，你完全可以用更简洁的写法实现相同的效果，比如新增用户的逻辑可以直接写成：

const AddNewUser = (user) => {
  SetUsers(prevList => [user, ...prevList]);
};

不需要额外做数组拷贝再调用unshift，代码更简洁也不容易出类似的错误。

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