如何在 React 中编辑对象数组？答案

【问题标题】：How to edit an array of objects in React?如何在 React 中编辑对象数组？
【发布时间】：2022-11-22 03:34:08
【问题描述】：

假设我有一个反应状态变量，它是一个数组用户对象。用户对象有 2 个对我们很重要的键：ID和姓名.我必须改变姓名该列表中的 2 个用户。代码如下

const App = () => {
  
  const [users, setUsers] = useState([]);
  
  useEffect(async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const users = await response.json();
    setUsers(users);
  }, [])
  
  const edit1 = (id) => {
    const newUsers = users.map(user => {
      if(user.id === id) {
        user.name = 'John Doe';
      } 
      return user;
    });    
    setUsers(newUsers);
  }
  
  const edit2 = (id) => {
    const newUsers = users.map(user => ({
      ...user,
      name: user.id === id ? 'Jane Doe' : user.name
    }));
    setUsers(newUsers);
  }
  
  return(
    <div>
      <button onClick={() => edit1(2)}>Edit-1</button>
      <button onClick={() => edit2(5)}>Edit-2</button>
      <ul>
        {users.map((user) => (<li key={user.key}>{user.name}</li>))}
      </ul>
    </div>
  );
}

哪种方法更好？之间编辑1和编辑2哪种方法更好，因为它们都能完成工作？还是有另一种方法可以做到这一点？

问题很简单。在编辑1，并没有创建新的对象，而是创建了一个新的数组。由于 React 仅检查对数组对象的引用是否已更改（它已更改），因此它会继续重新渲染。在编辑2, 新对象也与新数组一起创建。这也会导致重新渲染。我对哪种方法更好感到困惑。

【问题讨论】：

您可以使用 immer 获取深层副本。

标签： javascript html reactjs react-hooks

【解决方案1】：

使用 edit2 您可以在其中创建一个新数组和新元素。但是对于 edit1，即使你有一个新数组，里面的对象仍然有对旧对象的引用。所以我建议edit2。

【讨论】：