如何用Yup在Formik提交时校验FieldArray动态新增必填字段

核心问题根源 #

代码中FieldArray的操作逻辑存在两处与Formik API不匹配的错误，直接导致动态新增行的数值结构和Yup校验规则无法匹配，因此提交时不会触发对应校验：

• 新增行参数错误：调用push()时传入了""空字符串，但insurance_details_array定义为对象数组结构，空字符串元素完全无法匹配Yup定义的对象校验规则
• 删除行参数错误：调用remove()时传入了{ index }格式的对象，但FieldArray的remove方法要求直接传入数组索引数字才能正常识别需要删除的位置

逐点修复代码 #

1. 修正新增行的传参逻辑 #

首先定义和初始值结构完全对齐的空行模板，避免数值结构错位：

const EMPTY_INSURANCE_ROW = {
  policy_number: "",
  insurance_company: "",
  insured_amount: "",
  insurance_expiry: "",
  premium_term: ""
}

替换原有新增按钮的点击逻辑：

{/* 原有错误写法：onClick={() => push("")} */}
<button 
  type="button" 
  onClick={() => push(EMPTY_INSURANCE_ROW)} 
  className="btn btn-primary m-1"
>
  +
</button>

2. 修正删除行的传参逻辑 #

替换原有删除按钮的点击逻辑：

{/* 原有错误写法：onClick={() => remove({ index })} */}
{index > 0 ? 
  <button 
    type="button" 
    onClick={() => remove(index)} 
    className="btn btn-primary"
  >
    -
  </button> 
: ""}

原问题现象的底层原因 #

当你用push("")新增元素时，数组对应位置的值是纯字符串。此时Yup遍历数组执行校验时，遇到非对象类型的元素，无法识别嵌套的policy_number/insurance_company等字段的校验规则，因此提交时不会生成对应错误。只有你在输入框内输入内容时，Formik会自动把该位置的字符串替换为带对应字段的对象，此时数值结构和校验规则匹配，错误提示才会正常显示。

可选优化配置 #

如果调整完参数后仍存在漏校验的情况，可以在Formik组件上显式开启变更时校验，避免配置覆盖默认触发逻辑：

<Formik
  initialValues={initialValues}
  validationSchema={validationSchema}
  onSubmit={onSubmit}
  validateOnChange={true}
  validateOnBlur={true}
>

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