React-Hook-Form表单默认值提交返回undefined问题求助（不使用useForm默认值）

问题背景 #

为表单字段设置了默认值（如日期字段），但未修改输入值时提交表单，返回的是undefined而非预设默认值，且不能使用useForm的defaultValues配置。

解决方案 #

1. 使用Controller组件管理字段

Controller是React Hook Form官方提供的受控组件包装器，通过它的defaultValue设置初始值，即使不修改字段，提交时也会将该值纳入表单数据。

示例代码：

import { Controller, useForm } from "react-hook-form";

function YourForm() {
  const { control, handleSubmit } = useForm();
  const defaultDate = "2024-05-20"; // 你的预设默认值

  const onSubmit = (formData) => {
    console.log(formData); // 未修改时，date字段会返回defaultDate
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="date"
        control={control}
        defaultValue={defaultDate}
        render={({ field }) => (
          <input type="date" {...field} />
        )}
      />
      <button type="submit">提交表单</button>
    </form>
  );
}

2. 组件挂载时用setValue手动初始化字段值

通过useEffect在组件挂载时调用setValue，将默认值存入表单状态，无需依赖useForm的defaultValues配置。

示例代码：

import { useEffect } from "react";
import { useForm } from "react-hook-form";

function YourForm() {
  const { register, handleSubmit, setValue } = useForm();
  const defaultDate = "2024-05-20";

  useEffect(() => {
    // 挂载时为字段设置初始值
    setValue("date", defaultDate);
  }, [setValue]);

  const onSubmit = (formData) => {
    console.log(formData); // 未修改时能拿到预设的defaultDate
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="date" {...register("date")} />
      <button type="submit">提交表单</button>
    </form>
  );
}

3. 提交时手动合并默认值（兜底方案）

如果以上两种方式不适用，可以在提交回调中手动将默认值与表单数据合并，覆盖undefined的字段。

示例代码：

import { useForm } from "react-hook-form";

function YourForm() {
  const { register, handleSubmit } = useForm();
  const defaultFormValues = {
    date: "2024-05-20"
  };

  const onSubmit = (formData) => {
    // 合并默认值，仅替换未修改的undefined字段
    const finalData = { ...defaultFormValues, ...formData };
    console.log(finalData);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="date" {...register("date")} defaultValue={defaultFormValues.date} />
      <button type="submit">提交表单</button>
    </form>
  );
}

说明 #

• 优先推荐Controller方案，它能更好地同步表单状态，符合React Hook Form的设计规范。
• setValue方案适合需要动态设置初始值的场景（比如从接口获取默认值）。

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