这是我的工作示例：https : //codesandbox.io/s/formik-example-dynamic-server-rendered-values-1uv4l

validateFormik 中有一个可用的回调：https ://jaredpalmer.com/formik/docs/api/formik#validate-values-values-formikerrors-values-promise-any使用它，您可以尝试执行以下操作。

我emailsAlreadyInUse用空数组启动，然后在你的 API 调用中，一旦返回错误，然后将该用户添加到数组，一旦用户再次使用相同的电子邮件并尝试验证，虽然它会通过是的验证，但它会在validate回调中被捕获，我相信在 Yup 验证之后运行（虽然我可能是错的，但在你的情况下并不重要）。

const emailsAlreadyInUse= [];
const handleSubmit = (values, {
  setSubmitting,
  setFieldError,
  setStatus
}) => {
  someApiCall(values)
    .then(
      () => {
        // Do something
        // possibly reset emailsAlreadyInUse if needed unless component is going to be unmounted.
      },
      (error) => {
        // example of setting error
        setFieldError('email', 'email is already used');
        // Assuming error object you receive has data object that has email property
        emailsAlreadyInUse.push(error.data.email);
      })
    .finally(() => {
      setSubmitting(false)
    });
};

<Formik
...
...
validate = {
  values => {
    let errors = {};
    if (emailsAlreadyInUse.includes(values.email)) {
      errors.email = 'email is already used';
    }
    return errors;
  }
}
/>

我发现比使用validate方法更简单的方法可以使 API 验证错误始终可见。您可以在表单上将validateOnBlur和设置validateOnChange为false。它只会在提交时导致验证，并且在更改字段值后从 API 返回的错误将保留。

用法：

<Formik
        initialValues={initialValues}
        onSubmit={handleSubmit}
        validateOnBlur={false}
        validateOnChange={false}
      >
...form fields...
</Formik>