时间戳

首页 > 解决方案 > 如何在Formik提交验证之前清除状态？

reactjs - 如何在Formik提交验证之前清除状态？

问题描述

我正在使用带有 yup 验证的 Formik，遵循以下模式：

const handleSubmit = async (values, { setStatus }) => {
  setStatus(''); // clean errors messages
  try {
    ... do submit work ...
      const res = await sendData( convertValues(values)); //
    ... more work
  } catch (e) {
    console.error(e);
    setStatus('an error occurred '...);
  }
};

const validationSchema = Yup.object({
  code: Yup.string().required(t('Required')),
  ....
});

return (
    <Formik onSubmit={handleSubmit} initialValues={initialValues} validationSchema={validationSchema}>
      {({ setFieldValue, status }) => (
        <Form>
          ....
          <MyErrorComponent msg={status} />
        </Form>
      )}
    </Formik>
);

这在这种情况下有问题：

  1. 用户提交表单。验证通过，但内部发生了一些错误handleSubmit。状态中显示错误消息
  2. 用户编辑表单并重试
  3. 这次发生验证错误
  4. 验证错误显示在输入字段内......但旧的状态消息未清除。

发生这种情况是因为验证发生在提交之前，因此setStatus('')不会被调用。处理此问题的推荐方法是什么？

标签： reactjsformik

解决方案

它对 onMouseDown 事件有一个验证过程。您可以通过防止提交按钮上的默认设置来避免重复验证。

 onMouseDown={(event: any): void => {
                event.preventDefault();
              }}

之后Formik自动清除状态

推荐阅读