React中concat与push的用法疑问：数组状态更新为何不符合预期？

嘿，我完全懂你刚接触React时的这种困惑——state的不可变性规则真的是新手最容易踩的坑之一！

咱们先把核心问题掰明白：React要求你永远不能直接修改state里的对象或数组，因为React是通过检测state的引用变化来判断是否需要重新渲染组件的。

为什么push不行，concat却可以？ #

• push()是数组的原地修改方法：它会直接改变原数组的内容，但数组本身的引用（也就是内存地址）并没有变。当你在setState里用push修改prevState.selectedNumbers时，React会发现新state和旧state引用的是同一个数组，就会认为“state没变化”，自然不会触发组件重新渲染，你的应用也就没法按预期更新了。
• concat()是非原地修改方法：它不会碰原数组，而是返回一个包含原数组所有元素+新元素的全新数组。这样你传给setState的是一个新的数组引用，React能立刻检测到这个变化，进而触发组件重新渲染，更新界面。

额外推荐更现代的写法 #

现在React社区更常用ES6的扩展运算符来创建新数组，写法更简洁直观，效果和concat完全一样：

this.setState(prevState => {
  return {
    selectedNumbers: [...prevState.selectedNumbers, 你要添加的数字]
  };
});

举个错误vs正确的例子对比会更清楚：

错误写法（直接修改原数组，React检测不到变化）：

this.setState(prevState => {
  prevState.selectedNumbers.push(3);
  return { selectedNumbers: prevState.selectedNumbers };
});

正确写法（返回新数组，触发更新）：

this.setState(prevState => {
  return { selectedNumbers: prevState.selectedNumbers.concat(3) };
});

所以你之前的问题根源就是误用了push直接修改原state数组，导致React没触发组件更新。换成concat或者扩展运算符的写法，应该就能解决问题啦！

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