如何向React State中已关联对象的users键添加新对象？

嘿，这个问题我太熟了！给React State里的users数组添加新的用户对象，得看你是用函数式组件（搭配useState Hook）还是类组件，两种场景的正确做法我都给你拆解清楚：

假设你的初始state是这样定义的：

import { useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([
    { id: 1, name: 'user1' },
    { id: 2, name: 'user2' }
  ]);
  // ...
}

要添加新的user3，核心原则是永远不要直接修改原state数组，必须返回一个新数组来触发组件重新渲染。推荐两种方式：

• 方式一：使用扩展运算符（最常用）
  用函数式更新的方式调用setUsers，确保拿到最新的state值：

const addNewUser = () => {
  const newUser = { id: 3, name: 'user3' };
  setUsers(prevUsers => [...prevUsers, newUser]);
};

这里的...prevUsers会把之前的所有用户对象展开，再把新的newUser追加到末尾，生成一个全新的数组。

• 方式二：使用concat方法
  concat方法会返回一个新数组，不会修改原数组，同样适合用来更新state：

const addNewUser = () => {
  const newUser = { id: 3, name: 'user3' };
  setUsers(prevUsers => prevUsers.concat(newUser));
};

如果是类组件，初始state通常在构造函数里定义：

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        { id: 1, name: 'user1' },
        { id: 2, name: 'user2' }
      ]
    };
  }
  // ...
}

添加新用户的逻辑类似，同样要通过setState的函数式更新来生成新数组：

addNewUser = () => {
  const newUser = { id: 3, name: 'user3' };
  this.setState(prevState => ({
    users: [...prevState.users, newUser]
  }));
};

关键提醒 #

千万别直接用users.push(newUser)这种方式修改原数组！React是通过state的引用变化来检测更新的，直接修改原数组不会触发组件重新渲染，还会导致不可预测的bug。

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