使用Yup做表单校验时react-hook-form resolver出现类型错误求助

问题解决方法 #

核心原因 #

你已经通过yupResolver将Yup校验规则注入useForm作为全局校验逻辑，同时又在<Controller>组件上添加了rules属性，两套校验规则的定义产生了类型冲突，是本次报错的主要诱因。

具体修改步骤 #

1. 移除Controller上的冗余rules配置
   把<Controller>上的rules={{ required: 'this field is required' }}属性删除，对应的必填提示直接写到Yup schema中即可：

const schema = yup.object().shape({
  email: yup.string().required('this field is required'),
  password: yup.string().required(),
  passwordConfirm: yup.string().required(),
});

2. 给Yup schema绑定表单泛型
   显式给schema绑定你定义的IFormInputs泛型，让TypeScript可以准确推导schema和表单字段的匹配关系，消除类型不兼容问题：

const schema = yup.object().shape<IFormInputs>({
  email: yup.string().required('this field is required'),
  password: yup.string().required(),
  passwordConfirm: yup.string().required(),
});

3. 可选优化：统一管理默认值
   react-hook-form v7推荐将所有字段的默认值统一放在useForm的配置项中，不需要分散在每个<Controller>组件上：

const {
  control,
  handleSubmit,
  getValues,
  formState: { errors },
} = useForm<IFormInputs>({ 
  resolver: yupResolver(schema),
  defaultValues: {
    email: '',
    password: '',
    passwordConfirm: ''
  }
});

修改后删除<Controller>上的defaultValue=""属性即可。

完成以上修改后类型报错就会消失。

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