使用Formik和Yup在FieldArray中进行条件验证

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

const validationSchema = Yup.object().shape({
  users: Yup.array().of(
    Yup.object().shape({
      name: Yup.string().when("age", {
        is: (age) => age >= 18,
        then: Yup.string().required("姓名不能为空"),
      }),
      age: Yup.number().required("年龄不能为空").positive("年龄必须是正数"),
    })
  ),
});

const initialValues = {
  users: [{ name: "", age: "" }],
};

const MyForm = () => {
  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {(formik) => (
        <Form>
          <FieldArray name="users">
            {({ push, remove }) => (
              <div>
                {formik.values.users.map((user, index) => (
                  <div key={index}>
                    <Field name={`users[${index}].name`} placeholder="姓名" />
                    <Field name={`users[${index}].age`} placeholder="年龄" />
                    <button type="button" onClick={() => remove(index)}>
                      删除
                    </button>
                  </div>
                ))}
                <button
                  type="button"
                  onClick={() => push({ name: "", age: "" })}
                >
                  添加用户
                </button>
              </div>
            )}
          </FieldArray>
          <button type="submit">提交</button>
        </Form>
      )}
    </Formik>
  );
};

export default MyForm;