为什么我不能以这种方式删除用户对象？答案

【问题标题】：Why I can't delete a user object this way?为什么我不能以这种方式删除用户对象？
【发布时间】：2021-06-22 13:18:55
【问题描述】：

大家好！

我是 ReactJS 的新手，我正在尝试做一些简单的项目来获得基础知识。

我开始了一个小项目，包括使用 React Hooks 添加和删除列表的用户（操纵状态）。

我可以正确地将新用户添加到我的用户列表并显示它，但是在删除用户时，什么都没有发生。

我找到了解决方案，但我无法解释，这就是我寻求您帮助的原因！

这是我的 App.js 文件，其中包含 有效的 DeleteUser 函数

import style from './App.module.css';
import React, { useState } from 'react';
import UserList from './components/UserList';
import UserForm from './components/UserForm'

let USERS = [
  {
    id: 1,
    name: 'John',
    age: 27
  },
  {
    id: 2,
    name: 'Mark',
    age: 24
  }
]

const App = () => {

  const [userss, SetUsers] = useState(USERS);

  const AddNewUser = (user) => {
    SetUsers((prevList) => {
      let updatedList = [...prevList];
      updatedList.unshift(user);
      return updatedList;
    });
  };

  const DeleteUser = user => {
    SetUsers((prevList) => {
      let updated = prevList.filter(el =>  el.id !== user.id);
      return updated;
    });
  };

  return (
    <div className={style.root}>
        <UserForm liftUpNewUser={AddNewUser} />
        <UserList users={userss} liftUpUserToDelete={DeleteUser} />
    </div>
  );
}

export default App;

我的问题是： 为什么以这种方式编写的 DeleteUser 函数（如下）不起作用？知道它和 AddNewUser 函数的逻辑是一样的。

const DeleteUser = user => {
    SetUsers((prevList) => {
      let updated = [...prevList];
      updated.filter(el =>  el.id !== user.id);
      return updated;
    });
  };

提前对不起我的英语！希望有人可以帮助我=)

【问题讨论】：

标签： javascript arrays reactjs function react-hooks

【解决方案1】：

代码中的这一行...

updated.filter(el =>  el.id !== user.id);

... 是无操作的，因为 updated 数组的值永远不会改变。 filter 返回 a new array 而不是，这个新数组被分配给第一个 sn-p 中的一个变量。

这样做的副作用是 React 不必按值比较这些数组：它们的引用会不同。如果filter 按您预期的方式工作，就不会发生这种情况，就地进行更改，类似于 Array.splice。

【讨论】：

【解决方案2】：

因为Array.filter方法并没有修改原来的数组而是返回一个新的。

【讨论】：