reactjs - 使用 Yup 的 react-hook-form 解析器类型错误
问题描述
我正在创建一个身份验证表单,并且我正在参考 react-hook-form文档,了解如何使用 yup 来验证我的输入。据我所知,一切都与文档中提供的实现几乎相同。但是,我在useForm
解析器上遇到错误(如下所示)。知道我哪里出错了吗?
"react-hook-form": "^7.15.2"
"yup": "^0.32.9"
"@hookform/resolvers": "^2.8.1"
错误
代码
interface IFormInputs {
email: string;
password: string;
passwordConfirm: string;
}
const schema = yup.object().shape({
email: yup.string().required(),
password: yup.string().required(),
passwordConfirm: yup.string().required(),
});
const SignUp = (): JSX.Element => {
const {
control,
handleSubmit,
getValues,
formState: { errors },
} = useForm<IFormInputs>({ resolver: yupResolver(schema) });
const onSubmit: SubmitHandler<IFormInputs> = () => {
const values = getValues();
console.log('values', values);
};
return (
<div>
<StyledPaper>
<StyledTypography>Sign Up</StyledTypography>
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
name="email"
rules={{ required: 'this field is required' }}
defaultValue=""
control={control}
render={({ field }) => (
<TextField
fullWidth
label="Email"
variant="filled"
value={field.value}
error={!!errors.email}
helperText="Provide an email"
{...field}
/>
)}
/>
<StyledButton type="submit">Submit</StyledButton>
</form>
</StyledPaper>
<div>
<StyledTypography>Already have an account? Log in.</StyledTypography>
</div>
</div>
);
};
export default SignUp;
解决方案
这看起来像一个库错误,将@hookform/resolvers降级到2.8.0
似乎可以解决问题。
编辑:您可以2.8.1
通过强制yubResolver
使用yub.AnyObjectSchema
泛型来消除版本上的错误。感谢
Mihai-github解决这个问题。
useForm<IFormInputs>({
resolver: yupResolver<yup.AnyObjectSchema>(schema),
});
推荐阅读
- go - Golang for select 循环消耗 100% 的 cpu
- c++ - 来自 C++ 的 QStandardItemModel 在 QtQuick / QML TableView 中不可见
- javascript - 从字符串中删除一个字符的函数
- java - 对数组进行排序的最简单方法是什么?
- vuejs2 - vue-material 表不适用于 v-slot 语法
- regex - Vim:如何替换字符串的多个实例,但仅限于该字符串中的某些分隔符之间
- c# - 处理 json 以写入文件的 WebAPI 控制器
- python - 在 python 中使用 matplotlib 时从 csv 文件中操作数据值
- reactjs - 使用 useReducer 更新状态时出现问题
- laravel - Laravel 从 5.5 升级到 5.6 到 5.7:未捕获 ReferenceError: axios is not defined