react-hook-form中useFormContext获取的register无法同步表单状态？

可能的原因及修复方案 #

1. 父组件未使用上下文内的 handleSubmit #

你的父组件中，提交逻辑使用的 handleSubmit 未关联 FormProvider 上下文，导致无法读取通过 useFormContext 注册的字段值。必须使用 methods.handleSubmit 而非全局导入的方法。

修复后的父组件代码：

const methods = useForm();

function onSubmit(data) { console.log(data) }

<FormProvider {...methods}>
  <form onSubmit={methods.handleSubmit(onSubmit)}> {/* 改为 methods.handleSubmit */}
    <DateInput
      fieldName={'dateOfBirth'}
      label={'Date of Birth'}
    />
    <button type="submit">提交</button>
  </form>
</FormProvider>

2. 未正确导入核心 API #

确保 FormProvider 和 useFormContext 都从 react-hook-form 正确导入：

// 父组件
import { useForm, FormProvider } from "react-hook-form";

// 子组件
import { useFormContext } from "react-hook-form";

3. 自定义 Input 组件未转发必要 props #

如果你的 Input 是自定义组件，必须将 register 传递的所有 props（如 onChange、value、name）转发给原生 <input> 标签：

// 示例自定义 Input 组件
function Input({ type, placeholder, ...rest }) {
  return <input type={type} placeholder={placeholder} {...rest} />;
}

4. 可选：确认表单初始化配置 #

如果需要预设字段值，确保 useForm 初始化时配置正确的默认值：

const methods = useForm({
  defaultValues: {
    dateOfBirth: "" // 确保字段在表单状态中存在
  }
});

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