React中setState无法更新state内嵌套对象的问题求助

你代码里有3个直接导致问题的硬错误，和更新对象的语法选型无关：

1. setState是异步执行的：调用setState后立刻同步打印this.state，拿到的必然是更新前的旧值，React不会在setState调用的同步代码块里立刻修改state。
2. setState返回的状态结构完全错误：你当前的updater函数把prevState.object和新对象直接展开到state根层，相当于把state改成了{foo: 'Value', bar: 90, array: [...]}的平面对象，原本state下的object字段根本没被修改，还是保留初始值。
3. state初始化方式违规：除了类组件的constructor构造函数，其他位置（包括componentDidMount）直接给this.state赋值不会走React的状态更新流程，还会打乱内部更新队列。

正确实现代码 #

// 类组件state正确初始化：直接写类属性即可，不需要放到生命周期里赋值
const initialState = {
  object: {
    foo: '',
    bar: 0,
    array: []
  }
};

class DemoComponent extends React.Component {
  state = initialState;

  componentDidMount() {
    const newObjectVal = {
      foo: 'Value',
      bar: 90,
      array: [{/* 你的数组对象内容 */}]
    };

    this.setState(
      prevState => ({
        // 先保留state根层其他字段，避免覆盖其他state值
        ...prevState,
        // 明确指定更新object字段
        object: {
          // 如果是全量替换object，这行展开可以省略；如果是局部更新就保留
          ...prevState.object,
          ...newObjectVal
        }
      }),
      // 要验证更新结果，必须写在setState的第二个回调里
      () => {
        console.log(this.state.object); // 这里能拿到更新后的值
      }
    );
  }

  render() {
    // render函数执行时state已经完成更新，这里也能拿到最新值
    return <div>{this.state.object.foo}</div>
  }
}

快速排查 checklist #

• 检查setState返回的新对象结构：必须和原有state的嵌套层级完全对应，要更新state.object就必须在返回值里显式给object键赋值，不能把object的内部属性直接铺到state根层。
• 不要在setState调用后的同步代码里读取state：所有依赖更新后state的逻辑，要么放到setState的回调参数里，要么放到render、componentDidUpdate这类执行时state已经更新完成的生命周期里。
• 检查state赋值位置：除了constructor构造函数和类属性直接初始化，任何位置都不要直接写this.state = xxx，所有状态修改必须走setState。
• 如果后续要更新object.array数组里的某一项，也要遵循不可变更新原则，不要直接修改原数组/原对象的属性，生成新的数组/对象引用再传给setState。

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