react-hook-form提交数据如何排除未挂载字段的默认值

解决方法 #

在useForm初始化参数中添加shouldUnregister: true配置即可实现需求，该配置会让react-hook-form自动排除未挂载对应表单控件的字段。
修改后的useForm代码如下：

const { register, handleSubmit } = useForm({
  defaultValues: {
    firstName: "test",
    lastName: "test2"
  },
  shouldUnregister: true
});

配置说明

• react-hook-form默认会保留所有在defaultValues中声明的字段，无论对应控件是否挂载到表单
• 开启shouldUnregister后，只有通过register注册且对应控件处于挂载状态的字段，才会被纳入提交数据
  修改后提交表单返回的数据将仅包含已挂载的firstName字段，符合预期输出。
  如果不想全局开启该配置，也可以在提交时手动过滤字段：通过getFieldState方法判断字段是否已注册，再筛选提交数据即可，全局配置是最简单高效的实现方式。

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