Formik嵌套表单验证修复：产品选项与子选项验证异常

核心需求回顾 #

需实现带选项及子选项的产品表单，满足以下验证规则：

• 每个选项下至少包含一个子选项
• 子选项标题为必填项
• 子选项价格为必填正数

当前问题修复方案 #

1. 修复选项标题填写后仍提示必填的问题 #

问题根源：选项标题的name字段路径未正确对应Formik状态，导致验证逻辑无法识别已填写内容。
修复代码：

<Field
  name={`options[${index}].title`}
  placeholder="选项标题"
/>
{errors.options?.[index]?.title && touched.options?.[index]?.title && (
  <div className="error">{errors.options[index].title}</div>
)}

确保name属性严格匹配Formik状态中选项标题的路径，同时正确关联touched和errors的对应字段。

2. 添加「选项需至少一个子选项」的错误提示 #

修复步骤：在Yup验证Schema中为选项的subOptions数组添加min(1)规则，并渲染对应错误提示。
验证Schema修改：

const validationSchema = Yup.object().shape({
  // 保留原有产品详情验证规则
  options: Yup.array().of(
    Yup.object().shape({
      title: Yup.string().required("选项标题必填"),
      subOptions: Yup.array()
        .min(1, "每个选项至少需要一个子选项")
        .of(
          Yup.object().shape({
            subTitle: Yup.string().required("子选项标题必填"),
            price: Yup.number().required("子选项价格必填").positive("价格必须为正数")
          })
        )
    })
  )
});

错误提示渲染：

{errors.options?.[index]?.subOptions && touched.options?.[index]?.subOptions && (
  <div className="error">{errors.options[index].subOptions}</div>
)}

3. 修复子选项标题未触发验证的问题 #

问题根源：子选项标题的name字段路径错误，导致无法关联Yup验证规则。
修复代码：

{option.subOptions.map((subOption, subIndex) => (
  <div key={subIndex}>
    <Field
      name={`options[${index}].subOptions[${subIndex}].subTitle`}
      placeholder="子选项标题"
    />
    {errors.options?.[index]?.subOptions?.[subIndex]?.subTitle && 
      touched.options?.[index]?.subOptions?.[subIndex]?.subTitle && (
      <div className="error">{errors.options[index].subOptions[subIndex].subTitle}</div>
    )}
    {/* 子选项价格字段保留原有逻辑 */}
  </div>
))}

确保子选项标题的name路径与Schema中的subTitle字段完全匹配。

4. 修复子选项标题无法传入Formik的问题 #

问题根源：初始化状态未正确设置子选项标题的初始值，且字段路径错误导致Formik无法收集值。
修复步骤：

1. 在表单初始值中为每个子选项添加subTitle字段：

const initialValues = {
  // 产品详情初始字段
  options: [
    {
      title: "",
      subOptions: [{ subTitle: "", price: "" }]
    }
  ]
};

2. 确保子选项标题的name路径与第3点中的修复一致，Formik即可自动收集该字段的值。

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