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

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

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的错误

2 个答案: