useFormik配置validationSchema后handleSubmit无法触发问题求助

问题根源 #

字段名大小写不匹配，Yup校验规则定义的字段名和initialValues、表单输入框的name属性不一致，导致Yup校验一直不通过，Formik默认在校验失败时不会触发onSubmit回调。

具体不匹配点 #

• Yup的registerSchema中定义的校验字段为firstName、lastName（驼峰命名，字母N大写）
• useFormik的initialValues中对应字段写为firstname、lastname（全小写，字母n小写）
• 表单内两个对应的TextField组件name属性同样为firstname、lastname，和Yup定义的校验字段无法对应

Yup在校验时会认为你未填写必填的firstName、lastName字段，一直返回校验失败，因此不会触发提交逻辑，移除validationSchema后校验逻辑消失，提交就可以正常触发。

解决方案 #

二选一即可：

方案1：修改Yup校验规则的字段名，和现有初始值、表单命名保持一致 #

将registerSchema中的对应字段重命名为全小写：

const registerSchema = Yup.object().shape({
    // 把firstName改成firstname
    firstname: Yup.string()
      .min(2, 'Too Short!')
      .max(50, 'Too Long!')
      .required('Required'),
    // 把lastName改成lastname
    lastname: Yup.string()
      .min(2, 'Too Short!')
      .max(50, 'Too Long!')
      .required('Required'),
    // 其余字段保持不变
    ...
})

方案2：修改初始值和表单字段名，和Yup的驼峰命名保持一致 #

1. 修改initialValues的对应字段：

initialValues:{
    firstName: "", // 从firstname改为firstName
    lastName: "", // 从lastname改为lastName
    username: "",
    email: "",
    password: "",
    passwordConfirm: "",
},

2. 修改表单内两个对应的TextField配置：
   Firstname输入框修改name、value、错误判断的字段名：

<TextField
    type="text"
    placeholder="Firstname"
    fullWidth
    name="firstName" // 这里改为firstName
    variant="outlined"
    required
    value={formik.values.firstName} // 改为firstName
    onChange={formik.handleChange}
    error={formik.touched.firstName && Boolean(formik.errors.firstName)} // 改为firstName
    helperText={formik.touched.firstName && formik.errors.firstName} // 改为firstName
/>

Lastname输入框做同样修改，把所有lastname改为lastName即可。

问题排查小技巧 #

后续遇到类似提交无响应的问题，可以在提交前打印formik.errors查看所有校验错误，能快速定位到隐式的校验失败原因。

内容的提问来源于stack exchange，提问作者Yan Dbz