React useState数组添加对象异常：无法新增条目仅嵌套扩展

错误原因分析 #

你的代码里，setEntrys((prev) => [{ ...prev, date: clickedDay, entry: hinweis }])存在逻辑错误：

• prev是数组类型，{ ...prev }会把数组的索引作为键、数组元素作为值，将数组转换成一个对象
• 之后你把这个转换后的对象和date、entry属性合并，再放到一个新数组中，导致每次更新都是把之前的数组嵌套进新数组的第一个元素里，最终出现0->0->0的嵌套结构

正确写法 #

要实现添加新条目并按顺序编号，应该把之前的数组展开，再追加新的对象：

const [entrys, setEntrys] = useState([{ date: "", entry: "" }]);

// 点击按钮的处理逻辑
setEntrys((prev) => [...prev, { date: clickedDay, entry: hinweis }]);

补充说明 #

• [...prev]会创建原数组的浅拷贝，保证不修改原状态（符合React状态不可变的原则）
• 新的对象{ date: clickedDay, entry: hinweis }会被追加到数组末尾，数组的索引就是天然的顺序编号（比如第一个元素索引0，第二个1，以此类推）
• 如果初始时不需要默认的空条目，可以把初始状态改成[]

内容的提问来源于stack exchange，提问作者Captai-N