如何使用扩展运算符/Object.assign动态覆盖对象属性且不修改原状态

• 直接使用对象展开语法即可实现，核心逻辑是先拷贝原对象的所有属性，再通过同名属性覆盖原有值，不会修改原状态对象：

  // 原状态对象：this.state.obj = { 2311: 2 }
  const newObj = {
    ...this.state.obj,
    2311: 3 // 直接指定要覆盖的属性和新值
  };
  // 之后更新状态，比如 React 中使用 this.setState({ obj: newObj })
  

• 如果属性名是动态的（比如存储在变量中），可以结合计算属性名来处理：

  const targetKey = 2311;
  const newValue = 3;
  const newObj = {
    ...this.state.obj,
    [targetKey]: newValue // 用方括号包裹变量作为属性名
  };
  

这个方式和你新增属性的逻辑完全一致，只是把新增的属性名换成了要覆盖的已有属性名而已，不需要依赖lodash等工具就能完成无副作用的状态更新。

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