使用 Yup 异步测试时 Formik 显示错误的错误消息

如何解决使用 Yup 异步测试时 Formik 显示错误的错误消息

版本：

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>
      )}
    </>
  );
}