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

Question

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

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 组件的 render prop 中的 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 的错误。

Answer 1

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

基本上，错误消息组件打印出生成的任何错误消息。它无法从错误消息中区分出哪里和什么。

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

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>
                )}
              />
            )}

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

How to add error message to yup validation for array containing distinct values in FieldArray?

reactjs

yup

formik