Formik与Yup数组字段验证问题：errors对象类型冲突的最佳处理方式

先修正你的Yup规则 #

你当前的Yup规则和预期要求不符：

• 你定义的是number()类型，但预期元素是非空字符串
• 未处理“字段可以为空”的规则（默认array()是必填的，需添加.nullable()或.optional()）

修正后的规则如下：

choices: array()
  .nullable() // 允许字段为null（对应“可以为空”的要求）
  .optional() // 或用optional，允许字段完全不存在
  .test(
    'min-length',
    'At least two choices must be provided',
    (value) => !value || value.length >= 2
  )
  .of(
    string('Must be a string')
      .trim()
      .required('May not be empty')
  ),

这里用.test()替代.min(2)，是因为.min()会在数组为空时触发错误，而我们需要空数组/空字段不触发验证。

解决errors.choices类型不一致的问题 #

Formik的错误结构确实会因验证层级不同出现两种类型：数组整体错误是字符串，元素错误是数组。处理这类问题的最佳实践有两种：

1. 分离全局错误和元素错误 #

在组件中直接通过类型判断区分两类错误：

• 全局错误（数组长度不足）：检查errors.choices是否为字符串
• 元素错误（单个选项为空）：如果errors.choices是数组，遍历每个元素的错误

示例组件中的错误处理代码：

// 全局错误提示
{typeof errors.choices === 'string' && (
  <div className="error">{errors.choices}</div>
)}

// 单个选项错误提示
{Array.isArray(errors.choices) && errors.choices.map((err, index) => (
  err && <div key={index} className="error">选项 {index+1}: {err}</div>
))}

2. 统一错误结构（推荐） #

通过Formik的自定义validate函数，将数组的全局错误和元素错误拆分到不同的错误键中，彻底避免类型混淆：

const validate = (values) => {
  const errors = {};
  const { choices } = values;

  // 校验数组整体长度规则
  if (choices && choices.length < 2) {
    errors.choicesGlobal = 'At least two choices must be provided';
  }

  // 校验单个选项规则
  if (choices) {
    errors.choices = choices.map((choice) => {
      if (!choice?.trim()) return 'May not be empty';
      return null;
    });
  }

  return errors;
};

之后在组件中可以分别读取errors.choicesGlobal（全局错误）和errors.choices（元素错误数组），两类错误互不干扰。

关于你的疑问：空字符串选项应该提示什么？ #

按照你的预期规则，当添加空字符串选项时，应该提示该选项的元素错误（不能为空）；如果此时数组长度还不足2，还要同时提示全局长度错误。通过上面的第二种方法，你可以在错误对象中同时存储这两类错误，不会出现互相覆盖的情况。

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