如何更新嵌套在对象内部的表单值？

核心原因 #

绝大多数表单类库或手动实现的受控表单逻辑默认采用浅层合并处理状态更新，如果你仅修改嵌套对象的单层属性、未生成完整的上层对象新引用，状态更新无法触发视图重渲染，就会出现修改不生效的问题。

可行解决方法 #

• 手动更新状态时执行深层级合并
  如果是自己实现的受控表单逻辑，更新嵌套属性时需要完整构造上层对象的新引用，示例代码如下：

// 原有表单状态为formData，更新parcel_attributes下的name字段
setFormData(prevState => ({
  ...prevState,
  parcel_attributes: {
    ...prevState.parcel_attributes,
    name: "你要修改的新值"
  }
}))

• 直接使用表单库内置的嵌套字段声明规则
  如果使用主流前端表单库，直接按照官方规则声明嵌套字段即可，无需手动处理合并逻辑：
  • Ant Design Form：给Form.Item的name属性传递数组，比如name={['parcel_attributes', 'name']}即可直接绑定对应嵌套属性
  • React Hook Form：调用register时用点语法声明，比如register('parcel_attributes.name')
• 校验初始化逻辑
  要确保表单状态初始化时，parcel_attributes对象已被正确初始化，不能为undefined或null，否则绑定嵌套字段时会因读取空值属性失效，导致更新失败。

你当前需要操作的字段结构参考：

parcel_attributes: {
  name: "",
  sku: "",
  quantity: ""
}

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