React Hook Form结合FormProvider与MUI失效问题求助

核心排查点 #

1. FormContext 传递是否正确 #

• 自定义表单组件里必须用 useFormContext() 获取表单上下文，所有子组件要包裹在 FormProvider 内部。
• 确认 FormProvider 的 value 完整传递了 useForm() 返回的全部核心对象：

  const form = useForm();
  <FormProvider value={form}>
    {/* 自定义表单子组件 */}
  </FormProvider>
  

2. 表单项组件注册是否规范 #

• 自定义输入组件需通过 useController 或 register 完成注册，绑定正确的 name 属性：

  // useController 示例
  const { field, fieldState } = useController({
    name: 'username',
    control: control, // 从useFormContext获取的control
    rules: { required: '用户名必填' }
  });
  

• 验证错误信息通过 fieldState.error 读取，不要手动从表单对象中获取。

3. 表单提交事件绑定是否正确 #

• 自定义表单的 onSubmit 必须绑定 handleSubmit 包裹的回调函数，且 handleSubmit 要来自 useFormContext：

  const { handleSubmit } = useFormContext();
  const onSubmit = (data: FormData) => {
    console.log(data); // 验证提交逻辑是否执行
  };
  
  <form onSubmit={handleSubmit(onSubmit)}>
    {/* 表单内容 */}
    <button type="submit">提交</button>
  </form>
  

4. TypeScript 类型定义是否完整 #

• 正确定义表单数据的类型接口，并传递给 useForm：

  interface FormData {
    username: string;
    password: string;
  }
  
  const form = useForm<FormData>();
  

常见误区 #

• 不要在子组件中重复调用 useForm()，这会生成独立的表单实例，导致上下文失效。
• 避免手动修改表单状态，所有交互通过 React Hook Form 提供的 API 完成。

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