为何useState的setter在执行mutation前就接收了已变更的state？

问题代码 #

function MyComponent(){
  const [ obj, setObj ] = useState({nested: {name: 'David'}, password: 'hello'});

  const handleClick = () => {
    setObj(prevObj => {
      console.log(prevObj);
      let newObj = { ...prevObj };
      newObj.nested.name = prevObj.nested.name === 'David' ? 'Mary' : 'David';
      return newObj;
    });
  }

  return (
    <div>
      <button onClick={handleClick}>Press</button>
    </div>
  );
}

问题解答 #

1. 首次点击时console.log(prevObj)显示nested.name为'Mary'的原因 #

这是浏览器控制台的惰性求值特性导致的：

• 调用console.log(prevObj)时，控制台不会立即序列化对象的所有属性值，仅保存对象的内存引用。
• 后续通过newObj.nested.name修改属性值时，由于newObj.nested和prevObj.nested指向同一内存地址，prevObj.nested的实际值已变为'Mary'。
• 当你在控制台展开对象时，才会读取该引用的最新状态，因此看到修改后的值；而直接console.log(prevObj.nested.name)时，会立即读取当时的字符串值（基本类型无引用问题），所以显示初始的'David'。

2. 三元运算符逻辑未按预期执行的原因 #

核心问题是直接突变了React原始状态：

• prevObj是useState回调传入的上一次状态快照，但它是引用类型对象。通过newObj.nested.name修改属性时，本质是直接修改了prevObj.nested的内部值（引用相同）。
• 这会导致同一次回调中prevObj.nested.name被提前修改，后续依赖该值的逻辑出错；更严重的是，React状态被意外突变后，下一次点击时的prevObj已是修改后的状态，导致三元判断条件完全偏离预期。

正确修改方案 #

要避免状态突变，需对嵌套对象进行层级拷贝：

const handleClick = () => {
  setObj(prevObj => {
    console.log(prevObj.nested.name); // 此时会正确打印当前状态的name值
    // 拷贝外层对象+嵌套的nested对象，切断引用关联
    let newObj = { 
      ...prevObj,
      nested: { ...prevObj.nested }
    };
    newObj.nested.name = prevObj.nested.name === 'David' ? 'Mary' : 'David';
    return newObj;
  });
}

修改后newObj.nested是全新对象，不会影响原始状态的prevObj.nested，控制台日志和逻辑判断都会恢复正常。

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