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

Question

我正在使用 Yup 的 .test() 在 Formik 中尝试异步验证方法并需要设置我从 API 获得的错误消息。根据后端的某些条件，错误消息会有所不同。
尝试了这里提到的几个解决方案
https://github.com/jquense/yup/issues/222和 Dynamic Validation Messages Using Yup and Typescript
但是是的，抛出了 test() 中给出的默认错误消息.
文档说

All tests must provide a name, an error message and a validation function that must return true or false or a ValidationError. To make a test async return a promise that resolves true or false or a 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 说:

test functions are called with a special context, or this value, thatexposes some useful metadata and functions. Note that to use thiscontext, the test function must be a function expression (function test(value) {}), not an arrow function, since arrow functions havelexical context.

这是工作代码。

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