Formik+Yup表单校验后onSubmit触发POST请求发邮件失效问题排查

核心问题分析 #

onSubmit无法触发绝大多数情况是Yup校验未通过，但你代码里的错误提示逻辑写错了，看不到校验失败的提示，误以为是onSubmit没触发。

具体问题和解决方法 #

1. 错误提示逻辑错误（核心诱因）

你代码里email、subject字段的错误展示条件都错误写成了判断formik.errors.fullName，也就是说就算这两个字段不符合你的Yup校验规则，页面上也不会展示对应错误，而Formik默认在校验未通过时会直接阻止onSubmit执行。

修正对应位置的错误提示代码即可（额外添加touched判断，避免页面刚加载就显示错误）：

• fullName字段错误提示：

{formik.touched.fullName && formik.errors.fullName ? <div>{formik.errors.fullName}</div> : null}

• email字段错误提示：

{formik.touched.email && formik.errors.email ? <div>{formik.errors.email}</div> : null}

• subject字段错误提示：

{formik.touched.subject && formik.errors.subject ? <div>{formik.errors.subject}</div> : null}

2. 快速排查方法

如果修改完错误提示还是找不到问题，可以先临时注释掉useFormik配置里的validationSchema参数，测试提交是否能正常触发：

const formik = useFormik({
  initialValues,
  // 临时注释校验规则测试提交逻辑
  // validationSchema,
  onSubmit,
})

如果注释后onSubmit可以正常执行，就可以确认是你的Yup校验规则有不符合预期的地方，再调整对应规则即可。

3. 额外注意点

你代码里的留言字段名拼写为massage（正确拼写应为message），如果后端接口要求字段名为message的话，提交后后端会拿不到对应值，记得对应修改前后端的字段名即可。

内容的提问来源于stack exchange，提问作者Mohammed Himaz