Formik handlessubmit没有被调用

Question

我试图在使用formik和yup验证提交之前验证表单。表单由两部分组成，验证第一个表单，然后加载下一个表单。我设置状态handleShow(true)来触发第二种形式。下面是我的代码

const UserOnboardSchema = Yup.object().shape({
gender: Yup.string().required('please select the gender'),
firstName: Yup.string().required('Please enter your first name'),
lastName: Yup.string().required('Please enter your last name'),
mobile: Yup.string()
.required('Please enter your mobile number')
.matches(phoneRegExp, 'Please enter valid phone number'),
workExperience: Yup.string().required('Please enter your work experience'),
});

const formik = useFormik({
initialValues: {
gender: '',
firstName: '',
lastName: '',
mobile: '',
workExperience: '',
currentRole: '',
},
validationSchema: UserOnboardSchema,
onSubmit: (values) => {
console.log(values);
formik.resetForm();
},
});
const handleSubmit = (e) => {
e.preventDefault();
formik.handleSubmit();
if (Object.entries(formik.errors).length === 0) {
handleShow(true);
} else {
handleShow(false);
}
};

这是handleSubmit的问题，formik.handleSubmit不工作。它直接访问if/else条件，因此加载第二个表单而不验证第一个表单。

if (Object.entries(formik.errors).length === 0) {
handleShow(true);
} else {
handleShow(false);
}

但如果我把handleShow(true)直接给formik，像这样

const formik = useFormik({
initialValues: {
gender: '',
firstName: '',
lastName: '',
mobile: '',
workExperience: '',
currentRole: '',
},
validationSchema: UserOnboardSchema,
onSubmit: (values) => {
console.log(values);
handleShow(true); #----> Giving here.
formik.resetForm();
},
});

则formik和Yup验证工作。我不知道是什么导致了这个问题?

Answer 1

没有表单本身很难看出哪里出了问题。这里有一些有用的故障排除提示…

Formik不会触发onSubmit方法，如果表单中有错误。所以，我的首选是:

1. 检查表单中的任何错误，
2. 查看initialValues对象是否有未使用的字段

Answer 2

我以前遇到过这个错误。看起来像是来自验证。我删除了shape()并将validate移动到object()中。希望能对你有所帮助