react-hook-form结合material-ui无法显示规则校验错误

针对你遇到的“校验规则不触发、错误提示不展示”的问题，可按以下几个新手高频踩坑点逐一核对修复：

1. 字段状态托管冲突 #

• 很多新手会直接给数字输入框写死value={16}作为默认展示值，这种写法会让输入框成为非受控组件，完全脱离react-hook-form的状态追踪机制，不管输入什么内容，RHF都感知不到字段值的变化，自然不会触发校验逻辑。
• 正确的默认值配置方式是在初始化useForm时，通过defaultValues选项统一声明字段默认值，完全把字段状态交给RHF托管，不要手动给input绑定固定value。

2. 数字类型转换配置缺失 #

• 原生number类型输入框的输入值默认是字符串格式，如果你在注册字段时没有开启valueAsNumber配置，校验时会拿字符串类型的输入值和数字类型的校验阈值做对比，很容易出现校验逻辑不匹配、错误状态不更新的问题。
• 给数字字段的注册规则加上valueAsNumber: true配置，RHF就会自动把输入内容转为数值类型，匹配min、max规则的校验逻辑。

3. 错误状态读取路径错误 #

• 部分新手会直接从useForm的顶层返回值解构errors，实际上受RHF的性能优化机制影响，实时更新的错误状态是挂载在formState对象下的，直接顶层解构拿到的是不会随校验更新的旧状态，哪怕校验触发了，渲染逻辑也读不到最新的错误信息。
• 必须按照formState: { errors }的路径解构获取错误状态，才能拿到实时更新的字段校验结果。

可直接运行的参考实现代码 #

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

type FormSchema = {
  age: number;
};

export default function AgeForm() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<FormSchema>({
    // 在初始化配置中声明默认值
    defaultValues: {
      age: 16
    }
  });

  const submitHandler = (formData: FormSchema) => {
    console.log('提交的表单值', formData);
  };

  return (
    <form onSubmit={handleSubmit(submitHandler)}>
      <input
        type="number"
        {...register('age', {
          // 自动将输入值转为数字类型
          valueAsNumber: true,
          min: {
            value: 16,
            message: '输入数值不能小于16'
          },
          max: {
            value: 99,
            message: '输入数值不能大于99'
          }
        })}
      />
      {/* 绑定字段对应的错误状态渲染提示 */}
      {errors.age && <p style={{ color: 'crimson' }}>{errors.age.message}</p>}
      <button type="submit">提交表单</button>
    </form>
  );
}

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