React组件中二维状态数组更新异常，寻求规范解决方案

问题根源 #

你的问题出在二维数组的浅拷贝和错误的状态更新方式上：

1. 浅拷贝导致引用共享：你用[...minimumCostGenerator]只是复制了外层数组的引用，内层的子数组还是指向原数组的内存地址。React的状态更新依赖浅比较，当新状态和旧状态的引用相同时，会认为状态没有变化，不会触发组件重渲染，也不会正确更新状态。
2. 直接修改this.state：你临时方案里的this.state.history.push()完全违反了React的状态不可变原则——React状态是只读的，直接修改会绕过React的状态管理机制，导致状态混乱，虽然偶尔能看到效果，但绝对是错误的做法。

正确的状态更新方法 #

要解决这个问题，核心是对二维数组做深拷贝，同时严格遵循React的状态更新规范：

1. 正确拷贝二维数组 #

不要只用一层扩展运算符，要遍历外层数组，同时拷贝每一个子数组：

// 对二维数组进行深拷贝（针对纯数值/字符串的二维数组）
const copiedCostGrid = minimumCostGenerator.map(row => [...row]);

这样每个子数组都是新的引用，和原数组完全独立。

2. 使用函数式更新状态（类组件） #

因为setState是异步的，当你基于之前的history状态更新时，必须用函数式写法来获取最新的状态：

// 正确更新history状态
this.setState(prevState => ({
  history: [...prevState.history, prevState.minimumCostGrid.map(row => [...row])]
}));

3. 修正你的setHistory和setMinimumCostGrid方法 #

把直接修改this.state的代码全部换掉，改成符合规范的写法：

setHistory = (newHistory) => {
  // 先深拷贝newHistory里的二维数组
  const copiedHistory = newHistory.map(grid => grid.map(row => [...row]));
  this.setState(prevState => ({
    history: [...prevState.history, ...copiedHistory]
  }));
};

setMinimumCostGrid = (newMinimumCostGrid) => {
  // 深拷贝传入的二维数组
  const copiedGrid = newMinimumCostGrid.map(row => [...row]);
  this.setState({ minimumCostGrid: copiedGrid });
};

React状态更新最佳实践 #

• 绝不直接修改this.state：所有状态更新必须通过setState（类组件）或useState的更新函数（函数组件）完成。
• 嵌套结构必须深拷贝：对于对象、数组这类引用类型，更新时要确保每一层都是新的引用，避免共享原数据的引用。
• 依赖旧状态时用函数式更新：当新状态需要基于旧状态计算时，一定要用setState(prevState => ...)的形式，避免异步更新导致的状态不一致。

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