如何使用React Hooks通过prevState追加状态数组元素？

嘿，我来帮你补全代码并把逻辑讲清楚！

首先得提醒你：你的状态是数组类型，不能用对象的扩展语法{...prevState}，得用数组的扩展方式来生成新数组，这才符合React状态不可变的规则。

完整的正确写法 #

先假设你要追加的新消息对象是这样的：

const newMessage = {
  _id: 30,
  createdAt: new Date(),
  text: '这是一条新消息',
  user: { _id: 3, name: '新访客' }
};

然后调用setMessages的正确代码是：

setMessages(previousState => [...previousState, newMessage]);

为什么要这么写？ #

• React的状态是不可变的，你不能直接用push修改原数组——因为直接修改原状态对象的话，React没法检测到状态变化，也就不会触发组件重新渲染。
• [...previousState, newMessage]会创建一个全新的数组：先把原数组的所有元素展开进去，再把新元素追加到末尾，这样React就能准确识别到状态更新了。

避坑提醒 #

如果你误写成{...previousState}，会把数组转成一个键为索引、值为对应元素的对象，完全偏离了你的需求，所以一定要区分数组和对象的扩展语法哦！

内容的提问来源于stack exchange，提问作者Ankit Jayaprakash