javascript - Formik - 如何清除字段并显示自定义错误

Question

我在 React 中使用 Formik 来创建登录表单。如果用户输入了错误的登录信息，我想：

1. 清除密码字段。
2. 将密码字段重置为未触及，这样就不会触发密码错误消息。
3. 显示自定义错误消息，告诉用户他们的详细信息未被识别。

const onSubmit = (values, { setTouched, setFieldValue, setFieldError, setSubmitting }) => {
  // do some login stuff
  // on login error, do the following:
  setTouched({});
  setFieldValue('password', '');
  setFieldError('general', "Oops! Sorry, we couldn't log you in.");
};

这些事情中的每一个（setTouched、setFieldValue、setFieldError）都是单独工作的，但如果我一次完成所有这些事情，那么我的自定义一般错误不会显示。

我猜这是某种异步的事情，导致这些事情发生乱序并隐藏错误，但我不确定。

任何人都可以帮助我想要实现的目标吗？谢谢！

编辑

我随后尝试使用resetForm但没有成功。发生同样的事情 - 重置表单然后设置字段错误无效：

const onSubmit = (values, { resetForm, setFieldError, setSubmitting }) => {
  login(values).catch(() => {
    // do some login stuff
    // on login error, do the following:
    resetForm();
    setFieldError('general', "Oops! Sorry, we couldn't log you in.");
    setSubmitting(false);
  });
};

但是，我使用超时取得了一些成功。即使是 1 毫秒的超时实际上似乎也能完成工作并解决问题：

const onSubmit = (values, { setFieldTouched, setFieldValue, setFieldError, setSubmitting }) => {
  login(values).catch(() => {
    // do some login stuff
    // on login error, do the following:
    setFieldTouched('password', false);
    setFieldValue('password', '');
    setTimeout(function () {
      setFieldError('general', "Oops! Sorry, we couldn't log you in.");
    }, 1);
    setSubmitting(false);
  });
};

标签： javascriptreactjsformik