如何在 FieldArray 中包含不同值的数组的 yup 验证中添加错误消息？

Posted 2023-03-23

【中文标题】如何在 FieldArray 中包含不同值的数组的 yup 验证中添加错误消息？

【英文标题】：How to add error message to yup validation for array containing distinct values in FieldArray?

【发布时间】：2021-06-18 23:47:53

【问题描述】：

我正在尝试为我的字段数组添加错误消息，它应该包含不同元素的数组。以下是我的验证：

export const emails = yup
  .array(
    yup
      .string()
      .matches(/^\S+@\S+$/, 
        message: "Must be a valid email id"
      )
  )
  .test("Unique", "Email ids need to be unique", values => 
    return new Set(values).size === values.length;
  );

这是我的 FieldArray 组件的渲染道具中的 ErrorMessage 组件：

render=( form, push, remove ) => (
          <div>
            range(0, form.values[name].length).map(i => (
              <div className=styles.inputContainer key=i>
                <div>
                  <InputComponent name=`$name.$i` ...props />
                  <Button color="danger" onClick=() => remove(i)>
                    <FaTimes />
                  </Button>
                </div>
                <ErrorMessage
                  name=`$name.$i`
                  render=msg => (
                    <FormFeedback style= display: "block" >
                      msg
                    </FormFeedback>
                  )
                />
              </div>
            ))
            <Button
              color="info"
              onClick=() => push("")
              disabled=disabled || form.values[name].slice(-1)[0] === ""
            >
              <FaPlus />
            </Button>
          </div>
        )

但是我收到如下所示的错误消息。消息是一个接一个的字母。我理解，因为我将它包含在我的范围渲染方法中。但是我在里面包含了错误消息组件，因为我也想显示无效电子邮件 ID 的错误。

【参考方案1】：

我在某人的帮助下找到了解决方案。如果有人需要，我记下来。

基本上，错误消息组件会打印出任何生成的错误消息。它无法区分错误消息的位置和内容。

所以，我利用了 FieldArray 组件的渲染道具中的form 属性。错误消息作为form.errors 形式的属性出现。 然而，区分这两个 ErrorMessage 组件的关键在于，内部 form.errors 是一个数组，而外部是一个字符串。所以解决方法是检查 form.errors 对象的数据类型。下面是代码sn-p。

render=( form, push, remove ) => (
          <div>
            range(0, form.values[name].length).map(i => 
              return (
                <div className=styles.inputContainer key=i>
                  <div>
                    <InputComponent name=`$name.$i` ...props />
                    <Button color="danger" onClick=() => remove(i)>
                      <FaTimes />
                    </Button>
                  </div>
                  typeof form.errors[name] !== "string" && (
                    <ErrorMessage
                      name=`$name.$i`
                      render=msg => 
                        return (
                          <FormFeedback style= display: "block" >
                            msg
                          </FormFeedback>
                        );
                      
                    />
                  )
                </div>
              );
            )
            typeof form.errors[name] === "string" && (
              <ErrorMessage
                name=`$name`
                render=msg => (
                  <FormFeedback style= display: "block" >
                    msg
                  </FormFeedback>
                )
              />
            )