Reactjs 如何在Formik中使用一个验证模式字段验证多封电子邮件？

我有一个客户表单，它包含两个值

客户名称

客户电子邮件（可以是倍数）

除了电子邮件字段之外，我还提供了一个添加按钮，用户可以通过该按钮向表单中添加更多电子邮件。现在我想验证添加的每封电子邮件。此外，如果添加了它，它也是必需的。不允许使用空电子邮件

问题是我只有一个验证模式来验证电子邮件字段。如何使用同一字段验证多封电子邮件

即使添加了正确的电子邮件。它仍然会出错

---

请查看沙盒链接以查看代码

以下是包含多个电子邮件验证和错误的工作代码。
我使用Formik处理多封电子邮件。
您可以在沙箱中用此代码替换代码以进行测试

import React from "react";
import { TextField, IconButton } from "@material-ui/core";
import {
  AddCircleOutlined as AddCircleOutlinedIcon,
  IndeterminateCheckBox as IndeterminateCheckBoxIcon
} from "@material-ui/icons";

//FORMIK
import { Formik, FieldArray, getIn, ErrorMessage } from "formik";
import * as Yup from "yup";

export default function UnitsDrawer(props) {
  const callAPI = e => {
    console.log(e.name);
    console.log(e.email);
  };

  const testSchema = Yup.object().shape({
    name: Yup.string().required("Customer name is required"),
    email: Yup.array().of(
      Yup.string()
        .email("Enter a valid email")
        .required("Email is required")
    )
  });

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

  const formRef = React.useRef();

  return (
    <div>
      <Formik
        innerRef={formRef}
        validationSchema={testSchema}
        initialValues={initialValues}
        onSubmit={(values, actions) => {
          actions.setSubmitting(false);
          callAPI(values);
        }}
      >
        {({
          handleChange,
          handleBlur,
          values,
          errors,
          touched,
          handleSubmit,
          isSubmitting,
        }) => {
          return (
            <>
              <div>
                <TextField
                  label="Customer Name"
                  name="name"
                  margin="normal"
                  variant="outlined"
                  error={errors.name && touched.name}
                  onChange={handleChange}
                  onBlur={handleBlur}
                  value={values.name}
                  fullWidth
                />
                <ErrorMessage name="name" component="div" />
              </div>
              <FieldArray name="email">
                {({ push, remove }) =>
                  values.email.map((field, index) => (
                    <div key={`${index}`} className="dynamic-fields">
                      <div>
                        <TextField
                          label="Email"
                          variant="outlined"
                          className="input-item"
                          error={
                            getIn(touched, `email.${index}`) &&
                            getIn(errors, `email.${index}`)
                          }
                          name={`email.${index}`}
                          value={values.email[index]}
                          onChange={handleChange}
                          onBlur={handleBlur}
                          fullWidth
                        />
                        <ErrorMessage name={`email.${index}`} component="div" />
                      </div>
                      <IconButton
                        aria-label="filter list"
                        className="add-icon"
                        onClick={() => {
                          push("");
                        }}
                      >
                        <AddCircleOutlinedIcon color="primary" />
                      </IconButton>
                      {values.email.length > 1 && (
                        <IconButton
                          aria-label="filter list"
                          className="add-icon"
                          onClick={() => {
                            remove(index);
                          }}
                        >
                          <IndeterminateCheckBoxIcon />
                        </IconButton>
                      )}
                    </div>
                  ))
                }
              </FieldArray>
            </>
          );
        }}
      </Formik>
    </div>
  );
}

从“React”导入React；
从“@material ui/core”导入{TextField，IconButton}；
进口{
AddCircleOutlinedIcon，
不确定ECKbox作为不确定ECKbox
}从“@材料界面/图标”；
//福米克
从“Formik”导入{Formik，FieldArray，getIn，ErrorMessage}；
从“Yup”导入*作为Yup；
导出默认函数UnitsDrawer（道具）{
const callAPI=e=>{
console.log（e.name）；
控制台日志（电子邮件）；
};
const testSchema=Yup.object（）.shape({
名称：Yup.string（）.required（“需要客户名称”），
电子邮件：Yup.array（）。of(
是的，字符串（）
.电子邮件（“输入有效电子邮件”）
.必需（“需要电子邮件”）
)
});
常量初始值={
姓名：“，
电子邮件：[“”]
};
const formRef=React.useRef（）；
返回(
{
动作。设置提交（错误）；
callAPI（值）；
}}
>
{({
handleChange，
车把，
价值观
错误，
感动的，
手推，
提交，
}) => {
返回(
{（{push，remove}）=>
values.email.map（（字段，索引）=>(
{
推动（“”）；
}}
>
{values.email.length>1&&(
{
删除（索引）；
}}
>
)}
))
}
);
}}
);
}

您需要使用Yup数组来验证多封电子邮件。我使用了数组，但无法验证它。Yup.array（）.of（Yup.string（）.email（“输入有效电子邮件”）。必需（“需要电子邮件”））如何验证数组长度？例如，如果数组的长度为3或更多。用户不能添加更多字段。我使用了yup.array（）.max（3），但不起作用。知道如何解决吗？如果值的长度超过3，可以禁用“添加”按钮。