React二维数组状态偶尔被填充为全零，如何解决？

问题根源 #

你代码里的核心问题是二维数组的浅拷贝：

• 使用const newAdjacencyMatrix = [...adjacencyMatrix]仅拷贝了外层数组，内层的每个子数组仍然和原状态共享引用。修改新数组的内层元素时，会直接污染原状态，导致React DevTools显示的状态与UI不一致，后续更新还会出现数值被意外清零的情况。
• 另外你的差值计算逻辑完全可以简化，没必要绕弯子直接用输入值即可。

修复方案 #

需要对二维数组做深拷贝，确保新状态与原状态完全独立，以下是两种可靠的实现方式：

方式1：使用map逐行拷贝（推荐，性能更优） #

这种方式只拷贝需要的层级，适合结构固定的二维数组：

<input
  type="number"
  value={adjacencyMatrix[rowNode.id - 1][columnNode.id - 1]}
  min={0}
  step={1}
  onChange={(event) => {
    const inputValue = +event.target.value;
    // 深拷贝二维数组：外层数组拷贝 + 每个子数组单独拷贝
    const newAdjacencyMatrix = adjacencyMatrix.map(row => [...row]);
    const rowIdx = rowNode.id - 1;
    const colIdx = columnNode.id - 1;

    // 更新当前单元格
    newAdjacencyMatrix[rowIdx][colIdx] = inputValue;
    // 对称更新（非对角线情况）
    if (rowNode.id !== columnNode.id) {
      newAdjacencyMatrix[colIdx][rowIdx] = inputValue;
    }

    setAdjacencyMatrix(newAdjacencyMatrix);
  }}
  id={`adjacency${rowNode.id}${columnNode.id}`}
/>

方式2：JSON序列化反序列化（适合简单结构） #

如果你的矩阵元素都是基础类型（比如数字），可以用这种快速深拷贝方式：

// 替换拷贝逻辑即可
const newAdjacencyMatrix = JSON.parse(JSON.stringify(adjacencyMatrix));

修复原理 #

通过深拷贝生成完全独立的新数组后，修改新数组的元素不会影响原状态，React能够正确追踪状态的变化，确保DevTools显示的状态与UI同步，后续更新也不会出现之前的清零问题。

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