React中如何正确更新State嵌套对象的子属性？

先说说你之前写法的问题 #

• 直接修改prevState.user是错误的：React的State是不可变对象，直接修改原state会破坏状态的可追踪性，甚至导致组件无法正确重渲染。
• 第二种写法的对象语法错误：setState接收的配置对象里，不能用user.my_var = ...这种赋值语句，嵌套属性无法通过点语法直接作为对象的键。

方式一：对象式更新（适合简单场景） #

在componentDidMount中可以这样写，通过扩展运算符复制原对象，再覆盖目标属性：

componentDidMount() {
  this.setState({
    user: {
      ...this.state.user, // 保留user对象的其他原有属性
      my_var: cookies.get('dC')
    }
  });
}

方式二：函数式更新（更安全，推荐） #

如果存在异步更新场景，或者需要基于最新的前一次State更新，推荐用函数式写法，确保获取到最新的State：

componentDidMount() {
  this.setState(prevState => ({
    user: {
      ...prevState.user,
      my_var: cookies.get('dC')
    }
  }));
}

顺便修正你表单变更时的写法 #

之前直接修改prevState的写法不符合React的不可变原则，应该改成：

this.setState(prevState => ({
  user: {
    ...prevState.user,
    my_var: 'myval'
  }
}));

内容的提问来源于stack exchange，提问作者N.Widds