使用React Hooks更新数组：为何push方式无效？
2026-5-12
为什么直接修改数组再调用
setArray不生效？ 嘿，这个问题刚好戳中了React useState Hook的核心规则——状态的不可变性，我给你一步步拆解清楚：
先说说注释掉的代码为啥没用：
myArray是useState返回的状态快照，React明确要求我们不能直接修改这个快照本身。你用myArray.push(...)确实在内存里改了数组的内容，但React根本不会“察觉”到这种修改——因为它是通过检测状态的引用变化来决定要不要重新渲染组件的。- 接着你调用
setArray(myArray)，但这里传的还是原来那个数组的引用，React一看“哦，引用没变化，状态没更新”，就不会触发组件重新渲染，所以列表自然不会显示新增的数字。
再看为啥下面的写法能正常工作：
[...myArray, myArray[myArray.length-1]+1]这行代码用扩展运算符创建了一个全新的数组，这个新数组和原来的myArray是完全不同的引用。- 当你把这个新数组传给
setArray时，React检测到状态的引用变了，就会触发组件重新渲染，新的列表项也就顺理成章地显示出来了。
小补充：
这是React的核心设计原则之一——永远不要直接修改状态值，所有状态更新都应该通过创建新的副本（比如数组用扩展运算符、concat，对象用Object.assign或者扩展运算符）来实现，这样React才能准确感知到状态变化，完成组件的重新渲染。
内容的提问来源于stack exchange，提问作者Jithin Ks
相关产品推荐
相关产品推荐
