如何用Yup onSubmit验证Formik中fieldArray的动态字段

npm install formik yup

import { Formik, FieldArray } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  dynamicFields: Yup.array().of(
    Yup.object().shape({
      fieldName: Yup.string().required('字段名不能为空'),
      fieldValue: Yup.string().required('字段值不能为空'),
    })
  ),
});

<Formik
  initialValues={{ dynamicFields: [] }}
  validationSchema={validationSchema}
  onSubmit={(values) => {
    // 处理表单提交逻辑
  }}
>
  {({ values, handleSubmit }) => (
    <form onSubmit={handleSubmit}>
      <FieldArray name="dynamicFields">
        {({ push, remove }) => (
          <div>
            {values.dynamicFields.map((_, index) => (
              <div key={index}>
                <label htmlFor={`dynamicFields[${index}].fieldName`}>字段名</label>
                <Field name={`dynamicFields[${index}].fieldName`} />
                <ErrorMessage name={`dynamicFields[${index}].fieldName`} component="div" />

                <label htmlFor={`dynamicFields[${index}].fieldValue`}>字段值</label>
                <Field name={`dynamicFields[${index}].fieldValue`} />
                <ErrorMessage name={`dynamicFields[${index}].fieldValue`} component="div" />

                <button type="button" onClick={() => remove(index)}>
                  删除字段
                </button>
              </div>
            ))}

            <button type="button" onClick={() => push({ fieldName: '', fieldValue: '' })}>
              添加字段
            </button>
          </div>
        )}
      </FieldArray>

      <button type="submit">提交</button>
    </form>
  )}
</Formik>

onSubmit={(values) => {
  console.log(values);
}}