在反应钩子中将元素添加到现有数组答案

【问题标题】：Adding an element to an existing array in react hooks在反应钩子中将元素添加到现有数组
【发布时间】：2021-01-05 15:58:58
【问题描述】：

所以我有这个状态变量：

const [Class, setClass] = useState({ Teacher: "John Fartsalot", Year: 2021, Students: [] });

我有一个：

ver studentObject

我想使用setClass 动态地将studentObject 推送到Students 数组中。

我看到了这个帖子：Push method in React Hooks (useState)?，但它似乎只有在里面只有列表时才有意义。

在我的情况下正确的做法是什么？

谢谢

【问题讨论】：

【解决方案1】：

虽然您可以将现有的 Class 传播到一个新对象中，然后也将新的 students 数组传播到该新对象中，但最好遵循约定并分开状态变量（如 React 建议的那样），并且不使用 Class 作为变量名（它非常接近保留字 class）。考虑：

const [teacher, setTeacher] = useState('John Fartsalot');
const [year, setYear] = useState(2021);
const [students, setStudents] = useState([]);

然后添加到学生数组中，做

setStudents([...students, studentObject]);

或者，如果students此时恰好处于陈旧的关闭状态，那么

setStudents(students => [...students, studentObject]);

【讨论】：

谢谢，这种方法似乎有效，但不幸的是，我稍后可能需要从数据库中更改现有的学生列表。有没有办法直接插入？无论哪种方式，我都会更改 Class 状态的名称。可能是这样的？ setClassData(ClassData => ({ ...ClassData, Students: some-code }))
你真的应该把不同的状态类型分离成不同的状态变量。如果您从数据库中获得新的学生名单，只需拨打setStudents 即可。 setStudents(studentsFromDB)