React：使用Formik和Yup验证动态字段时的必填校验异常

问题现状 #

动态生成的ruleValue字段（属于campaignRules数组内的每个元素），即使已经输入值，Formik仍提示“缺失值”，需要实现必填检查和数字类型校验。

错误原因 #

当前校验Schema中，ruleValue被定义为顶层字段，但实际目标字段是campaignRules数组里每个元素的value属性，校验路径不匹配，导致Formik无法正确识别数组内字段的校验状态。

修正方案 #

1. 调整校验Schema #

使用Yup的array().of()方法定义数组内元素的校验规则，将campaignRules数组的每个元素作为对象校验，指定value字段的必填和数字类型规则：

import * as Yup from 'yup';

export const CampaignEditValidationSchema = Yup.object({
  campaignName: Yup.string().required('Campaign name is required'),
  startDate: Yup.date().nullable().required('Start Date is required'),
  // 注意：原Schema中的content字段未在表单定义中出现，若无需校验可删除该行
  content: Yup.string().required('Content is required'),
  campaignRules: Yup.array().of(
    Yup.object({
      value: Yup.number()
        .typeError('Value must be a valid number') // 数字类型错误提示
        .required('Value can\'t be left blank') // 必填校验
    })
  )
  // 可选：如果要求至少添加一条规则，可添加以下配置
  // .min(1, 'At least one rule is required')
});

2. 确认字段路径匹配 #

表单定义中ruleValue的name属性已经正确指向数组内的字段：

ruleValue: {
  name: `campaignRules[${index}].value`,
  // ...其他配置
}

RuleCard组件中引用该字段名的写法保持不变即可，确保与Schema中的campaignRules[].value路径完全对应。

3. 扩展数字类型校验（可选） #

如果需要更严格的数字校验（比如整数、正数范围），可以扩展value的规则：

value: Yup.number()
  .typeError('Value must be a number')
  .integer('Value must be an integer') // 限制为整数
  .positive('Value must be a positive number') // 限制为正数
  .min(1, 'Value can\'t be less than 1') // 最小值限制
  .required('Value can\'t be left blank')

验证效果 #

修正后，当campaignRules数组中某条规则的value字段被填写且为有效数字时，Formik将不再提示该字段的错误；若未填写或输入非数字内容，则会触发对应的错误提示。

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