如何为React Formik Yup验证规则添加数组列表？验证失效求助

问题根源 #

验证完全失效的核心原因有两个：

1. 初始值未正确匹配输入框数量：initialValues里names设为空数组，但你要生成3个输入框，Formik无法追踪未在初始值中定义的names[0]/names[1]/names[2]字段，导致验证规则根本不触发。
2. Yup验证规则冗余且逻辑偏差：数组的required()重复声明，且没有针对固定3个输入框的场景做合理配置。

修复方案 #

1. 修正初始值：把names初始化为包含3个空字符串的数组，让Formik能识别每个输入框对应的字段：

   initialValues={{ names: ['', '', ''] }}
   

2. 调整Yup验证规则：
   • 元素层面：每个字符串必须非空且长度至少为2，去掉重复的required()；
   • 数组层面（可选）：如果需要强制用户填写满3个输入框，可添加length(3)规则：

   validationSchema={Yup.object().shape({
     names: Yup.array()
       .of(Yup.string().min(2, "至少2个字符").required("此字段不能为空"))
       .length(3, "必须填写3个名称")
   })}
   

3. 简化循环写法（可选）：把IIFE循环改成数组map，代码可读性更好，不影响验证逻辑。

修复后的完整代码 #

<Formik 
  initialValues={{
    names: ['', '', '']
  }}
  validationSchema={Yup.object().shape({
    names: Yup.array()
      .of(Yup.string().min(2, "至少2个字符").required("此字段不能为空"))
      .length(3, "必须填写3个名称")
  })}
  onSubmit={(values) => {
    alert(JSON.stringify(values));
  }}
>
  {({ errors, touched }) => (
    <Form>
      {[...Array(3)].map((_, i) => (
        <div key={`form${i}`}>
          <Field name={`names[${i}]`} />
          {errors.names?.[i] && touched.names?.[i] && (
            <div style={{ color: 'red' }}>{errors.names[i]}</div>
          )}
          {/* 也可以继续使用ErrorMessage组件：<ErrorMessage name={`names[${i}]`} /> */}
        </div>
      ))}
      <button type="submit">Add</button>
    </Form>
  )}
</Formik>

额外说明 #

• 用errors.names?.[i]和touched.names?.[i]做判断，能避免数组越界报错；
• 若不需要强制填写满3个输入框，直接去掉length(3)规则即可。

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