时间戳

首页 > 解决方案 > 使用 Formik 处理来自 api 的错误

reactjs - 使用 Formik 处理来自 api 的错误

问题描述

我从 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，但没有任何改变。

标签： reactjsformikyup

解决方案

这是我的工作示例：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;
  }
}
/>

推荐阅读