使用 Formik 处理来自 api 的错误

Question

我正在捕获来自 api 的错误并以表格形式显示它们，并且工作正常。但问题是当我更改表单中的一个字段时，所有错误都消失了。对于表单，我使用 Formik 进行验证，是的。

const handleSubmit = (values, {setSubmitting,  setFieldError, setStatus}) => {
    someApiCall(values)
        .then(
            () => {

            },
            (error) => {
                // example of setting error
                setFieldError('email', 'email is already used');
            })
        .finally(() => {
            setSubmitting(false)
        });
};

我尝试将第三个参数 false 添加到 setFieldError，但没有任何改变。

Answer 1

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

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

我用空数组启动 emailsAlreadyInUse 然后在你的 API 调用中一旦返回错误然后将该用户添加到数组并且一旦用户再次使用相同的电子邮件并尝试验证，虽然它会通过 Yup 验证，但它会被 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;
  }
}
/>

Answer 2

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

用法：

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

使用 Formik 处理来自 api 的错误

Handling errors from api with Formik

reactjs

yup

formik