为何调用setState前，state已显示更新状态？

兄弟，你遇到的问题核心是直接修改了React State中的引用类型值，这完全违反了React的state不可变原则，也是导致你console.log结果不符合预期的原因。

为什么会出现这个现象？ #

不管是stat = this.state.options还是stat = prevState.options，你拿到的都是原数组的引用地址，而不是数组的副本。当你调用stat.push(options)的时候，已经直接修改了原state里的数组——哪怕你还没调用setState！

而且浏览器的控制台对于引用类型（比如数组、对象）会有“延迟求值”的特性：你console.log的时候看到的是一个快照，但当你展开它的时候，浏览器才会去读取它的实际值，这时候数组已经被修改了，所以你看到的总是更新后的状态。

正确的写法应该是怎样的？ #

你需要创建原数组的副本，修改副本后再通过setState更新state，这样才不会污染原state。推荐两种常用方式：

方式1：使用扩展运算符（最简洁）

handleOptions(options){
  this.setState((prevState) => {
    // 创建原数组的新副本，添加新元素
    const newOptions = [...prevState.options, options];
    console.log(prevState.options); // 现在打印的就是真正的旧状态啦
    return { options: newOptions };
  });
}

方式2：使用Array.concat()方法

concat会返回一个新数组，不会修改原数组本身：

handleOptions(options){
  this.setState((prevState) => {
    const newOptions = prevState.options.concat(options);
    console.log(prevState.options);
    return { options: newOptions };
  });
}

额外提醒 #

React依赖state的不可变性来检测变化、触发重新渲染。如果直接修改原state，React可能无法感知到state的变化，导致组件不重新渲染，或者出现其他难以排查的bug。所以处理数组、对象这类引用类型的state时，一定要记得先创建副本再修改哦！

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