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

在使用Formik和Yup进行条件验证的情况下，FieldArray是一个重要的组件。FieldArray允许我们在表单中动态地添加或删除字段，而条件验证则允许根据特定条件对这些字段进行验证。

首先，让我们先了解一下Formik和Yup。Formik是一个用于构建React表单的库，它提供了处理表单状态、表单验证和表单提交等功能。Yup是一个JavaScript模式验证库，它可以帮助我们定义和验证表单的规则。

在使用FieldArray时，我们可以在Yup模式验证中使用when方法来执行条件验证。when方法接受两个参数：一个字段名称和一个配置对象。配置对象中可以定义验证规则，当指定的字段满足某个条件时，这些验证规则将被应用。

下面是一个示例，演示如何在FieldArray中使用Formik和Yup进行条件验证：

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;

在上面的示例中，我们定义了一个名为users的FieldArray，其中包含了name和age两个字段。我们使用了Yup来定义验证规则。当age字段大于等于18时，name字段必填，否则不需要填写。另外，name和age字段都是必填的。

你可以根据具体的业务需求和表单结构来调整以上示例中的验证规则和字段。

以上示例中用到的相关产品：

Formik：Formik是一个用于构建React表单的库，提供了处理表单状态、表单验证和表单提交等功能。你可以在Tencent Cloud Form Component了解腾讯云相关产品。
Yup：Yup是一个JavaScript模式验证库，可以帮助我们定义和验证表单的规则。你可以在Tencent Cloud Schema Validation了解腾讯云相关产品。

希望以上解答对你有所帮助！