React嵌套对象赋值报错求助：住宅上传表单状态更新问题

我来帮你搞定这个嵌套对象状态更新的问题！你的代码里有两个关键问题导致了报错，咱们一步步拆解解决：

错误原因分析 #

1. 违反React状态不可变性原则：你直接修改了state.dwelling.spaces这个嵌套对象，React要求状态必须是不可变的——不能直接修改原状态对象，而是要创建新的对象来替换。
2. Object.assign使用错误：你的代码里Object.assign(state.dwelling.spaces, {[id]: value})返回的是更新后的spaces对象，然后你把这个对象赋值给了dwelling，这就导致原来的Dwelling实例被替换成了spaces对象，完全破坏了原本的数据结构，自然会抛出异常。
3. 异步状态更新的误解：setState是异步操作，你在setState之后立刻console.log(this.state.dwelling)，大概率拿到的还是更新前的旧状态，没法正确调试。

正确的解决方案 #

我们需要创建原对象的副本，在副本上修改嵌套属性，再把新的副本传给setState，同时保持Dwelling实例的结构不变。这里提供两种可行的写法：

写法一：使用展开运算符（推荐，简洁直观） #

handleChange({target: {id, value}}) {
  this.setState(prevState => {
    // 1. 创建dwelling的浅拷贝，保留Dwelling实例结构
    const updatedDwelling = {...prevState.dwelling};
    // 2. 创建spaces的新对象，合并原有属性和新值
    updatedDwelling.spaces = {...updatedDwelling.spaces, [id]: value};
    // 3. 返回包含更新后dwelling的状态对象
    return { dwelling: updatedDwelling };
  }, () => {
    // 用setState的回调函数查看最新状态（因为setState异步）
    console.log(this.state.dwelling);
  });
}

写法二：针对自定义Dwelling类实例的严谨写法 #

如果Dwelling是你自定义的类，用展开运算符可能无法完整复制实例方法，这时可以用Object.assign创建实例副本：

handleChange({target: {id, value}}) {
  this.setState(prevState => {
    // 1. 创建新的Dwelling实例，复制原有属性
    const updatedDwelling = new Dwelling();
    Object.assign(updatedDwelling, prevState.dwelling);
    // 2. 更新spaces对象，同样保持不可变性
    updatedDwelling.spaces = Object.assign({}, updatedDwelling.spaces, {[id]: value});
    return { dwelling: updatedDwelling };
  }, () => {
    console.log(this.state.dwelling);
  });
}

关键要点总结 #

• 永远不要直接修改React状态中的嵌套对象，必须通过创建新对象的方式更新
• 确保更新后dwelling仍然是Dwelling实例，不要把它替换成spaces这样的子对象
• 调试异步状态更新时，一定要用setState的第二个回调参数，或者在componentDidUpdate里查看状态

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