问题描述
版本:
formik: 2.2.6
yup: 0.32.8
我今天在使用 formik 时遇到了这个问题,所以我着手创建一个可重现的示例。
在示例中,您会看到我们在 data
字段上附加了不同的验证器,包括:required
、length(6)
和异步 test
。
当满足显示错误消息的正确条件时,您会注意到在异步 test
解决之前会显示错误的错误消息。您还会注意到,在显示错误消息和异步 test
解析之间,formik.isValidating
为 false。
我们在这里做错了什么,我们如何防止出现这条不正确的错误消息?
此外,当异步 formik.isValidating
尚未解析时,我们如何让 true
返回 test
?如果我们能做到这一点,我们就可以向用户表明验证仍在等待中。
最小可重复代码:https://codesandbox.io/s/black-shape-z5e54?file=/src/App.js
import React,{ useEffect,useRef } from "react";
import "./styles.css";
import { useFormik } from "formik";
import * as yup from "yup";
const asynctest = (value,context) => {
return new Promise((res) => {
setTimeout(() => {
res(context.createError({ message: "This ain't right" }));
},3000);
});
};
const validationSchema = yup.object().shape({
data: yup
.string()
.required("Data is required")
.length(6)
.test("async-val","",asynctest)
});
export default function App() {
const formik = useFormik({
validationSchema,initialValues: {
data: ""
}
});
// A helper to simulate a field that auto blurs
// when completing. In the real code,handleBlur is called
// when the pin input reaches its sixth character.
const inputRef = useRef(null);
useEffect(() => {
if (formik.values.data.length >= 6) {
inputRef.current.blur();
}
},[formik.values.data]);
return (
<>
<input
type="text"
name="data"
ref={inputRef}
value={formik.values.data}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.errors.data && formik.touched.data && (
<div>{formik.errors.data}</div>
)}
</>
);
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)