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

Question

我正在使用 Formik 和 yup 验证，遵循以下模式:

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

这在这种情况下有问题:

用户提交表单。验证通过，但内部出现一些错误 handleSubmit .错误消息显示在状态

中

用户编辑表单并重试

这次出现验证错误

验证错误显示在输入字段内...但旧的状态消息未清除。

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

Answer 1

我认为你应该使用这样的东西:

<Formik
      initialValues={
        firstName: '',
        email: ''
      }
      validationSchema={
        Yup.object().shape({
          email: Yup.string()
            .email("Must be a valid email")
            .max(255)
            .required("Email is required"),
          firstname: Yup.string()
            .max(255)
            .required("First name is required"),
        })
      }
      onSubmit={(e, { resetForm }) => {
        let val = e;
        postSubmit (e.firstName,e.email);
        // ur rest logic
        // resetForm({
        //  values: {
        //    ...e,
        //  },
        });
      }}
    >
      {({ handleChange, values, initialValues, errors }) => (
        // Your form jsx
      )}
</Formik>

不要使用 useState使用 formik，让 Formik 处理错误和验证!
我确实使用了这种模式，并且效果很好。
如果您没有找到方法，请分享您的表格，以便为您服务!