React状态数组异步问题：为何后续代码影响前置console.log输出？

核心问题根源 #

你遇到的现象并不是代码执行顺序的异常（像你举的numberA基本类型例子那种逻辑问题），而是两个关键因素共同导致的：

1. 浅拷贝引发的引用共享
2. 浏览器控制台的异步快照特性

1. 浅拷贝的隐形坑 #

你用var tempField = this.state.array.slice(0)做的是浅拷贝——它只会复制外层数组的结构，但里面的每一行子数组（比如this.state.array[0]、this.state.array[1]这类）依然和原state里的子数组指向同一个引用。

当你启用注释里的代码修改tempField[y][x + 3]时，本质上是直接修改了this.state.array里对应的子元素（因为它们共享引用）。这就导致你在修改前console.log(this.state.array)的结果，在控制台展开时会显示修改后的状态——因为控制台保存的是对象引用，而非log那一刻的静态快照。

2. 浏览器控制台的特性 #

浏览器的console.log对于对象/数组这类引用类型，不会立即生成一个“冻结的快照”。当你在控制台点击展开数组时，它才会去读取当前对象的实际状态。所以即使你是在修改前log的原state.array，当后面代码修改了它的引用内容，你在控制台看到的就是修改后的结果，看起来像是log的时机出了问题。

修复方案 #

要彻底解决这个问题，你需要做深拷贝让tempField完全独立于原this.state.array，同时修正调试时的快照问题：

第一步：替换浅拷贝为深拷贝

把原来的浅拷贝代码：

var tempField = this.state.array.slice(0);

替换为深拷贝实现（你的场景里用JSON序列化即可，因为数组内都是普通对象）：

// 深拷贝生成完全独立的tempField
var tempField = JSON.parse(JSON.stringify(this.state.array));

第二步：打印真实快照（便于调试）

如果你想在控制台看到log那一刻的真实状态，可以把对象转成JSON字符串打印，避免引用干扰：

// 打印原state.array的静态快照
console.log("state array before: ", JSON.parse(JSON.stringify(this.state.array)));
// 打印tempField的静态快照
console.log("temp Field before: ", JSON.parse(JSON.stringify(tempField)));

第三步：优化React状态更新

另外，建议把多次setState调用合并成一次，避免不必要的重渲染：

this.setState((state) => {
  const newField = JSON.parse(JSON.stringify(state.array));
  const newPosition = [];
  let z = 0;
  for (let y = 0; y < state.nextShape.shape[0].length; y++) {
    for (let x = 0; x < state.nextShape.shape[0][y].length; x++) {
      if (state.nextShape.shape[0][y][x] === 1) {
        newField[y][x + 3] = { occupied: false, color: state.nextShape.color };
        newPosition[z] = [y, x + 3];
        z++;
      }
    }
  }
  return {
    array: newField,
    currentPosition: newPosition,
    currentShape: state.nextShape,
    nextShape: BlockTypes[Math.floor(Math.random() * BlockTypes.length)]
  };
});

补充说明 #

你举的numberA例子是基本类型的同步操作，和你的场景本质不同——基本类型是值传递，修改后不会影响之前的log；但数组/对象是引用传递，浅拷贝后修改子元素会影响原对象，再加上控制台的引用特性，才出现了看起来“log顺序异常”的错觉。

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