React Hook Form提交时如何清除默认空值，避免传给后端？

React Hook Form 本身没有原生支持深度清理空对象、空字符串这类值的 API——它的设计逻辑是尽量保留表单的原始输入状态，所以你目前用递归 deepClean 的思路没问题，但可以试试以下更贴合 RHF 用法的方案：

方案1：提交前在handleSubmit回调里预处理数据 #

直接在提交回调里对原始表单值做清理，逻辑可复用你现有的递归清理逻辑，和 RHF 的提交流程结合更紧密：

const { handleSubmit } = useForm({
  defaultValues: {
    name: '',
    profile: {}
  }
});

const cleanFormData = (data) => {
  const cleaned = {};
  Object.entries(data).forEach(([key, value]) => {
    if (value === '') return;
    if (typeof value === 'object' && value !== null) {
      const cleanedNested = cleanFormData(value);
      if (Object.keys(cleanedNested).length > 0) {
        cleaned[key] = cleanedNested;
      }
    } else {
      cleaned[key] = value;
    }
  });
  return cleaned;
};

const onSubmit = handleSubmit((rawData) => {
  const processedData = cleanFormData(rawData);
  // 这里把processedData发给后端
});

方案2：用RHF的transform全局配置 #

利用 useForm 的 transform 选项，全局对表单值做转换，这样不管是调用 getValues() 还是提交时的表单数据，都会自动经过清理处理：

const { register, handleSubmit } = useForm({
  defaultValues: {
    name: '',
    profile: {}
  },
  transform: (values) => {
    return cleanFormData(values); // 复用上面的cleanFormData函数
  }
});

这个方案的好处是不用每次提交都手动调用清理函数，全局生效更省心。

方案3：动态卸载空字段（适合动态表单场景） #

如果你的空对象是动态生成的（比如用户可以添加/删除嵌套表单项），可以在监听字段为空时用 unregister 移除对应的字段：

const { unregister, watch } = useForm();

// 监听嵌套字段，为空时卸载
useEffect(() => {
  const profile = watch('profile');
  if (profile && Object.keys(profile).length === 0) {
    unregister('profile');
  }
}, [watch, unregister]);

但这个方案更适合动态场景，对固定默认值里的空对象来说，前两个方案更直接高效。

总结：RHF 确实没有原生的深度清理 API，以上方案都是基于 RHF 现有能力的集成化处理方式，比独立的 deepClean 函数更贴合表单流程。

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