如何在 Yup 异步验证中设置动态错误消息？

Question

我正在使用 Yup 的.test()方法在 Formik 中尝试异步验证，并且需要设置我从 API 获得的错误消息。根据后端的某些条件，错误消息会有所不同。

尝试了这里提到的几个解决方案
https://github.com/jquense/yup/issues/222和使用 Yup 和 Typescript 的动态验证消息

但是是的，抛出了test().

文档说

所有测试都必须提供名称、错误消息和必须返回 true 或 false 或 ValidationError 的验证函数。使测试异步返回一个可解决 true 或 false 或 ValidationError 的承诺。

我正在解决带有错误消息的新 ValidationError 但它仍然会引发默认错误。

这是代码。

const schema = Yup.object().shape({
  email: Yup.string().test(
    "email_async_validation",
    "Email Validation Error", // YUP always throws this error
    value => {
      return new Promise((resolve, reject) => {
        emailValidationApi(value)
          .then(res => {
            const { message } = res.data; // I want this error message to be shown in form.
            resolve(new Yup.ValidationError(message));
          })
          .catch(e => {
            console.log(e);
          });
      });
    }
  )
});

Answer 1

我使用function语法而不是箭头函数来实现验证功能。

Doc 说：

使用特殊的上下文或this值调用测试函数，它公开了一些有用的元数据和函数。请注意，要使用this 上下文，测试函数必须是函数表达式(function test(value) {})，而不是箭头函数，因为箭头函数具有词法上下文。

这是工作代码。

const schema = Yup.object().shape({
  email: Yup.string()
    .email("Not a valid email")
    .required("Required")
    .test("email_async_validation", "Email Validation Error", function (value) { // Use function
      return emailValidationApi(value)
        .then((res) => {
          const message = res;
          console.log("API Response:", message);
          return this.createError({ message: message });
          // return Promise.resolve(this.createError({ message: message })); // This also works
        })
        .catch((e) => {
          console.log(e);
        });
    })
});