React中如何正确更新嵌套对象状态？现有实现求助

嘿，你的这段代码确实存在关键问题，核心是直接修改了React的原始state对象，这违反了React状态管理的不可变原则，很可能导致组件不触发重新渲染，或者出现难以追踪的状态bug。

原代码的问题所在 #

你用Object.assign(state.dwelling, {[id]: {[type]: value}})的时候，Object.assign的第一个参数是原state.dwelling对象，这会直接修改这个原始对象，而不是创建一个新的副本。React依赖状态的引用变化来判断是否需要更新组件，直接修改原state的话，React可能检测不到状态变化，组件就不会重新渲染，你的表单值也无法同步更新。

正确的嵌套状态更新方式 #

我们需要严格遵循不可变更新原则，每次更新都创建新的对象副本，而不是修改原有对象。这里有两种常用的靠谱方法：

方法1：用ES6展开运算符（推荐，代码更简洁直观）

利用对象展开运算符逐层创建新的对象，确保每一层的引用都是全新的：

handleChange({target: {id, value}}, type) {
  this.setState(state => ({
    dwelling: {
      // 先复制dwelling的所有原有属性
      ...state.dwelling,
      // 针对要修改的id对应的对象，再复制它的原有属性，然后覆盖目标type的值
      [id]: {
        ...state.dwelling[id],
        [type]: value
      }
    }
  }));
}

这样一来，dwelling是新对象，[id]对应的子对象也是新的，完全没有碰原始的state，React能准确检测到状态变化并触发更新。

方法2：用Object.assign（注意参数顺序）

如果你习惯用Object.assign，一定要确保每次都创建新对象，而不是修改原对象：

handleChange({target: {id, value}}, type) {
  this.setState(state => ({
    dwelling: Object.assign({}, state.dwelling, {
      [id]: Object.assign({}, state.dwelling[id], {
        [type]: value
      })
    })
  }));
}

这里把空对象作为Object.assign的第一个参数，这样它会返回一个新的对象，而不是修改原有的state.dwelling。内层的[id]对象同理，也要用空对象开头来创建新副本。

额外提醒：为什么要坚持不可变更新？ #

• React的更新机制完全依赖状态的引用变化，直接修改原对象会让React“误以为”状态没变化，组件不更新
• 不可变的状态更容易调试，你可以清晰对比状态的前后差异，定位问题更轻松
• 后续如果切换到React Hooks或者使用Redux这类状态管理库，不可变更新是必须遵守的规则，现在养成习惯能避免很多后续坑

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