用于表单验证成功的代码运行即使验证失败

Question

我正在将表单数据发布到 Mongo。如果没有错误，表单应该重置并显示一条成功消息。但现在发生的情况是，当出现验证错误时，表单会重置并显示成功消息。

onSubmit={async (values, { setSubmitting, resetForm }) => {
  try {
     const response = await fetch(//code here);
     const responseData = await response.json();

     if (!response.okay) {
          setErrors(responseData);
     }

     setSuccess(true);
     resetForm();

  } catch(err) {
     console.log(err);
  {
}}

Answer 1

成功条件应该是else。

    if (!response.okay) {
        setErrors(responseData);
    }
    else{
        setSuccess(true);
        resetForm();
    }

Answer 2

您的问题是一个简单的疏忽。即使表单失败，您也是运行 setSuccess。只需将 2 个函数放在 else.

中

此外，response.okay 不存在于提取 API 中，您应该使用 response.ok 以获得预期的结果。

onSubmit={async (values, { setSubmitting, resetForm }) => {
  try {
     const response = await fetch(//code here);
     const responseData = await response.json();

     if (!response.ok) {
          setErrors(responseData);
     } else {
         setSuccess(true);
         resetForm();
     }
  } catch(err) {
     console.log(err);
  }
}}

用于表单验证成功的代码运行即使验证失败

Code meant for form validation success running even when validation fails

reactjs

formik

用于表单验证成功的代码 运行 即使验证失败

Code meant for form validation success running even when validation fails

reactjs

formik

用于表单验证成功的代码运行即使验证失败