react-hook-form设置defaultValues后未挂载字段提交仍存在，unregister无效怎么办

问题原因 #

这是react-hook-form的默认行为导致的：

• 只要你在defaultValues中定义了字段，默认情况下提交表单时会把所有defaultValues中的字段都带入返回结果，不管该字段对应的组件是否挂载、是否调用过unregister
• 没有配置defaultValues时，没有初始值的未注册字段自然不会被包含在提交结果中，所以运行符合预期
• v6版本的unregister方法默认保留defaultValues中对应字段的值，所以调用后字段仍然会出现在提交数据里

解决方案1：开启全局自动注销配置（推荐） #

在useForm的配置项中添加shouldUnregister: true，开启后未挂载组件对应的字段会自动注销，不会被带入提交结果，也无需手动调用unregister：

const { register, handleSubmit, unregister, watch } = useForm({
  defaultValues: {
    firstName: "test",
    lastName: "test2"
  },
  // 新增以下配置
  shouldUnregister: true
});

解决方案2：手动注销时清除默认值 #

如果不需要开启全局配置，调用unregister时传入配置参数keepDefaultValue: false，强制清除defaultValues中对应字段的值：

onClick={() => {
  console.log("unregistering lastName")
  unregister("lastName", { keepDefaultValue: false });
}}

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