React formik Validation Error Api 每次在其他字段验证时呈现

如何解决React formik Validation Error Api 每次在其他字段验证时呈现

我创建了一个注册表单，我尝试在 onBlur 上验证该表单，并且该表单通过后端 Apis 进行了电子邮件检查，每次验证任何其他该案例邮件检查 API 呈现时都会遇到问题 我尝试使用 onBlur 和 onChange 验证 false 那种情况下工作正常，但我需要 onBlur 验证，任何想法

感谢帮助

const CompanyRegister = (props) => {
  const classes = useStyles();
  var [mailError,setMailError] = useState(false);

  const initialValues = {
    name: "",website: "",addressLine1: "",city: "",state: "",mail: "",};

  const validationSchema = yup.object({
    name: yup.string().strict().trim().required("Enter the ComapnyName"),website: yup
      .string()
      .matches(
        /((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/,"Enter correct url!"
      )
      .strict()
      .trim()
      .required("Enter the Website"),pincode: yup.number("Invalid pincode").positive("Invalid pincode"),phone: yup.number("InValid Phone Number"),altPhone: yup.number("InValid Phone Number"),mail: yup
      .string()
      .email("Enter correct Format")
      .strict()
      .trim()
      .required("Enter the Correct Email"),});

  const validCheck = (data) => {
    var mailData = { mail: data };
    axios.post(baseurl + "companymailcheck",mailData).then((res) => {
      if (res.data == "Invalid") {
        setMailError(true);
      } else {
        setMailError(false);
      }
    });
  };

  const onSubmit = (data) => {
    axios
      .post(baseurl + "companyregisteration",data)
      .then((res) => {
        history.push(`/login`);
        toast.success("Successfully Created");
      })
      .catch((err) => {
        toast.error("Some Thing Error");
      });
  };

  return (
    <>
      <div className={classes.back}>
        <Link to="/">Home</Link>
      </div>
      <Container component="main" className={classes.layout}>
        <div className={classes.paper}>
       
          <Typography component="h1" variant="h5">
            Register
          </Typography>
          <Formik
            initialValues={initialValues}
            onSubmit={onSubmit}
            validateOnChange={false}
            validateOnBlur={true}
            validationSchema={validationSchema}
          >
            {({ values,isValid }) => {
              return (
                <Form autoComplete="off">
                  <Grid container spacing={4}>
                    <Grid item xs={12} sm={6}>
                      <Field
                        as={TextField}
                        name="name"
                        fullWidth
                        label="Company Name"
                        autoFocus
                        required
                      />
                      <ErrorMessage name="name">
                        {(error) => (
                          <div className={classes.error}>{error}</div>
                        )}
                      </ErrorMessage>
                    </Grid>
                    <Grid item xs={12} sm={6}>
                      <Field
                        as={TextField}
                        name="website"
                        fullWidth
                        label="Website"
                        required
                      />
                      <ErrorMessage name="website">
                        {(error) => (
                          <div className={classes.error}>{error}</div>
                        )}
                      </ErrorMessage>
                    </Grid>
                    <Grid item xs={12} sm={12}>
                      <Field
                        as={TextField}
                        name="addressLine1"
                        type="text"
                        fullWidth
                        label="Address Line1"
                      />
                    </Grid>
                 
                  
                    <Grid item xs={12} sm={6}>
                      <Field
                        as={TextField}
                        name="mail"
                        fullWidth
                        label="Mail"
                        required
                        validate={() => validCheck(values.mail)}
                      />
                      <ErrorMessage name="mail">
                        {(error) => (
                          <div className={classes.error}>{error}</div>
                        )}
                      </ErrorMessage>
                      {mailError ? (
                        <span style={{ color: "red" }} id="errormessage">
                          Mail Already There!
                        </span>
                      ) : null}
                    </Grid>

                    <Button
                      type="submit"
                      fullWidth
                      variant="contained"
                      color="primary"
                      className={classes.submit}
                      disabled={!isValid || mailError}
                    >
                      Register
                    </Button>
                  </Grid>
                </Form>
              );
            }}
          </Formik>
        </div>
      </Container>
    </>
  );
};

export default CompanyRegister;

解决方法

只要在表单提交期间执行验证没问题，那么我会扩展 onSubmit 并将检查放在那里。

您可以使用第二个参数返回包含所有相关 setter 的 FormikBag 以正确使表单字段无效。参考：https://formik.org/docs/api/formik#onsubmit-values-values-formikbag-formikbag--void--promiseany

在这种情况下，我将使用 setFieldError(field,message)。参考：https://formik.org/docs/api/formik#setfielderror-field-string-errormsg-string--void

<Formik initialValues={initialValues}
        validationSchema={validationSchema}        
        onSubmit={(values,{setFieldError}) => {
            return validateMail(values.mail)
                 .then(() => {
                   // all good - continue with your submit handler
                   return onSubmit(values)
                 }) 
                 .catch(error => {
                   // something wrong? validate the error response + validation message OR set it statically.
                   setFieldError('mail','Mail Already There!')
                 }) 
        }}
          >