React Hook Form(TS)场景下父组件传递校验错误到子组件失效问题

问题1：子组件字段未配置校验规则 #

子组件中register("Allergy")未传入任何校验配置，和父组件Complaint字段不同，没有声明required: true的必填校验规则，因此字段为空时也不会生成对应的错误信息，自然不会触发错误提示。

修正后的子组件代码：

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

const Allergens = () => {
    const { register, formState: { errors } } = useFormContext();
    return(
        <> {/* 补充根节点，避免React渲染异常 */}
            <Label>Allergy<span className="mandatory">*</span></Label>
            <Input {...register("Allergy", { required: true })} />
            {errors.Allergy && <RequiredMessage/>}
        </>
    )
}

问题2：TypeScript环境未声明表单字段泛型 #

TS环境使用React Hook Form时，需要提前声明表单的完整字段类型，作为useForm的泛型参数传入，否则errors对象无法正确推断子组件中的Allergy字段，会出现类型校验不通过、运行时取不到对应错误的问题。

修正后的父组件代码：

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

// 声明表单全局字段类型
type ODFormValues = {
  Complaint: string;
  Allergy: string;
}

const OD= () => {
    // 传入泛型，可通过mode参数配置校验触发时机
    const methods = useForm<ODFormValues>({
      mode: "onSubmit" // 可选值：onChange/onBlur，配置后可实时触发校验无需等提交
    });
    const {
        register,
        handleSubmit,
        formState: { errors },
    } = methods;

    const onSubmit = (data: ODFormValues) => console.log('表单数据', data);

    return (
        {/* 必须绑定form标签的onSubmit事件，否则不会触发默认提交校验 */}
        <form onSubmit={handleSubmit(onSubmit)}>
            <FormProvider {...methods} >
               <Field>
                  <Label>Complaint:<span className="mandatory">*</span></Label>
                  <Textarea {...register("Complaint", { required: true })}/>                  
                  {errors.Complaint && <RequiredMessage/>}
               </Field> 
               <Allergens />
               <button type="submit">提交表单</button>
            </FormProvider>
        </form>
    )
}

其他排查点 #

如果调整完上述配置仍不显示错误，可检查以下内容：

• 确认useFormContext是从react-hook-form官方包导入，没有导入第三方封装的同名方法
• 确认提交逻辑绑定了handleSubmit方法，默认仅提交时会触发全表校验

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