Formik下拉选择框选中后仍显示Yup验证错误问题求助

问题根源 #

这类问题90%以上是初始值类型、下拉选项的value类型、Yup验证规则的类型三者不匹配导致的，另外也可能是Formik字段绑定逻辑有误。

具体解决方案 #

1. 统一类型匹配

假设你的下拉选项value是数字类型（比如<option value={1}>选项1</option>），但初始值设成了空字符串''，Yup验证却用了string()，就会出现选完仍报错的情况。

修正示例：

• 初始值配置：

const initialValues = {
  // 用null或合法选项值作为初始值，和选项value类型一致
  selectField: null 
};

• Yup验证规则：

import * as yup from 'yup';

const validationSchema = yup.object().shape({
  // 验证类型和选项value、初始值类型统一
  selectField: yup.number().required('请选择一个选项')
});

2. 确保Formik字段绑定正确

下拉选单必须正确绑定Formik的状态和方法：

<select
  name="selectField"
  value={formik.values.selectField}
  onChange={formik.handleChange}
  onBlur={formik.handleBlur}
>
  <option value="">请选择</option>
  <option value={1}>选项1</option>
  <option value={2}>选项2</option>
</select>
{/* 仅在字段被触碰过且有错误时显示提示 */}
{formik.touched.selectField && formik.errors.selectField && (
  <span style={{color: 'red'}}>{formik.errors.selectField}</span>
)}

3. 特殊情况处理

如果你的选项value是字符串，那初始值可以设为空字符串''，但Yup验证要对应改成string()：

const validationSchema = yup.object().shape({
  selectField: yup.string().required('请选择一个选项')
});

核心总结 #

始终保证初始值类型 ↔️ 下拉选项value类型 ↔️ Yup验证类型三者完全一致，同时正确绑定Formik的handleChange、handleBlur和状态值，就能解决选中选项后仍显示验证错误的问题。

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