字段数组中的Formik验证

import React from 'react';
import { Formik, Form, FieldArray, Field } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  items: Yup.array().of(
    Yup.object({
      name: Yup.string().required('Required'),
      quantity: Yup.number().min(1, 'Must be at least 1').required('Required')
    })
  )
});

const DynamicForm = () => (
  <Formik
    initialValues={{ items: [{ name: '', quantity: '' }] }}
    validationSchema={validationSchema}
    onSubmit={(values) => {
      console.log(values);
    }}
  >
    {({ values, errors, touched, setFieldValue, push, remove }) => (
      <Form>
        <FieldArray name="items">
          {arrayHelpers => (
            <div>
              {values.items.map((item, index) => (
                <div key={index}>
                  <Field name={`items.${index}.name`} />
                  {errors.items && touched.items ? (
                    <div>{errors.items[index].name}</div>
                  ) : null}
                  <Field name={`items.${index}.quantity`} type="number" />
                  {errors.items && touched.items ? (
                    <div>{errors.items[index].quantity}</div>
                  ) : null}
                  <button type="button" onClick={() => arrayHelpers.remove(index)}>Remove</button>
                </div>
              ))}
              <button type="button" onClick={() => arrayHelpers.push({ name: '', quantity: '' })}>Add Item</button>
            </div>
          )}
        </FieldArray>
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);

export default DynamicForm;