React中如何更新对象类型state的部分属性且不覆盖其余原有属性

问题原因 #

你当前的写法是直接为customerObj赋值了仅包含tm_last_name的全新对象，会完全替换state中原有的Customers类实例，因此其余属性会被清除。React的setState仅会对state的顶层属性做浅合并，嵌套对象的属性不会自动合并，需要手动处理。

解决方案 #

方法1：使用对象展开运算符（适用于无需保留类原型方法的场景）

先将原有customerObj的所有属性展开，再覆盖需要修改的目标属性，生成新对象后更新state：

this.setState({
  customerObj: {
    ...this.state.customerObj,
    tm_last_name: e.value
  }
});

注意：该方法生成的是普通JS对象，会丢失Customers类的原型链，如果你的类定义了原型方法，需使用方法2。

方法2：新建Customers实例保留类特性

如果需要保留Customers类的实例属性和原型方法，可以新建类实例，拷贝原有属性后修改目标值再更新state：

this.setState({
  customerObj: Object.assign(new Customers(), this.state.customerObj, { tm_last_name: e.value })
});

上述代码中Object.assign会先将原customerObj的所有属性拷贝到新的Customers实例上，再覆盖需要修改的属性，既保留了类的特性，也不会修改原有state的值。

注意事项 #

不要直接修改state中原有的customerObj属性，比如直接执行this.state.customerObj.tm_last_name = e.value后再调用setState，这种写法属于直接修改state，会导致React更新检测异常。

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