ReactJS如何仅更新state中嵌套对象的单个属性而不丢失其余数据

问题原因 #

React 中 setState 自带的浅层合并逻辑仅作用于 state 的第一层级属性。你在代码中直接将planData赋值为新对象{ id: plan }，相当于直接替换了整个planData对象，原有属性自然全部丢失。

解决方案 #

方案1：对象展开运算符（最常用）

直接在赋值时先展开原有planData的所有属性，再单独声明要覆盖的属性即可，修改后的代码如下：

planHandler(plan) {
  this.setState({
    planData: {
      ...this.state.planData, // 保留planData原有全部属性
      id: plan // 仅覆盖需要修改的id属性
    }
  });
}

方案2：函数式更新（更稳妥）

如果你的更新依赖当前最新的state值，建议使用函数式setState写法，避免state异步更新导致的取值错误：

planHandler(plan) {
  this.setState(prevState => ({
    planData: {
      ...prevState.planData,
      id: plan
    }
  }));
}

多层嵌套属性修改提示

如果后续需要修改嵌套层级更深的state属性，也可以逐层使用展开运算符处理，例如要修改planData.extra.volume的写法如下：

this.setState(prevState => ({
  planData: {
    ...prevState.planData,
    extra: {
      ...prevState.planData.extra,
      volume: 100
    }
  }
}));

如果嵌套层级超过3层觉得写法繁琐，也可以引入Immer库简化不可变数据的更新逻辑，无需手动编写多层展开代码。

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