react-hook-form调用unregister删除嵌套属性时误删整个父对象

问题原因 #

这个是react-hook-form的unregister方法的默认内置行为：当你删除嵌套结构的最后一个子字段时，库会默认自动清理上层的空对象/空数组，避免表单值中残留无意义的空结构，所以当你删除groups下唯一的groupId属性后，空的groups对象也会被连带移除。

解决方法 #

有两种常用方案可以实现保留空groups对象的需求：

• 方案1：调用unregister时传入配置，关闭空对象自动清理逻辑

form.unregister(`groups.${groupId}`, { keepEmptyObjects: true })

这个配置项会告知react-hook-form不要自动删除上层的空对象，执行后表单值就会保留{ groups: {} }的结构。

• 方案2：如果你的react-hook-form版本较低不支持上述配置，可以在删除后手动重置groups为初始空对象

form.unregister(`groups.${groupId}`)
// 第二个参数的配置可以避免触发表单脏值、已触摸状态变更和校验逻辑
form.setValue('groups', {}, { shouldDirty: false, shouldTouch: false, shouldValidate: false })

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