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