使用Yup对数组进行Formik & yup表单验证

npm install yup formik

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

const validationSchema = Yup.object().shape({
  // 定义数组字段的验证规则
  arrayField: Yup.array().of(
    Yup.string().required('此字段是必填的')
  )
});

const MyForm = () => (
  <Formik
    initialValues={{ arrayField: [] }}
    validationSchema={validationSchema}
    onSubmit={values => {
      // 处理表单提交逻辑
    }}
  >
    {({ values }) => (
      <Form>
        <FieldArray name="arrayField">
          {({ push, remove }) => (
            <div>
              {values.arrayField.map((value, index) => (
                <div key={index}>
                  <Field name={`arrayField[${index}]`} />
                  <ErrorMessage name={`arrayField[${index}]`} component="div" />
                  <button type="button" onClick={() => remove(index)}>
                    删除
                  </button>
                </div>
              ))}
              <button type="button" onClick={() => push('')}>
                添加
              </button>
            </div>
          )}
        </FieldArray>
        <button type="submit">提交</button>
      </Form>
    )}
  </Formik>
);