Yup 中如何测试数组中值的唯一性？

Question

我已经使用 Formik 在 React 中创建了一个带有验证的动态表单。

到目前为止我所取得的成就：

当前代码允许用户选择要购买的门票数量，然后输入每张门票所属人员的姓名和电子邮件，这两个字段都是必填字段，并且电子邮件字段必须包含有效的电子邮件地址。

如果表单有效，“购买门票”按钮只会在警报弹出窗口中显示表单值，而“重置”按钮会将表单重置回其初始状态，包括删除所有门票名称和电子邮件字段。

问题：我想在我的会员价值中添加独特性。例如，如果用户从下拉列表中选择 2，则表单将询问会员姓名和电子邮件 2 次，如果在第一个会员字段中，用户输入“abc”，而在会员列的第二个数字中，用户输入“abc”，则用户应输入“abc”显示错误，例如“成员值必须是唯一的”。

我已经从 Github 上关注了这个Link，但无法用我的代码实现这一点，我想我在这里遗漏了一些步骤。

代码链接： https://codesandbox.io/p/sandbox/react-hooks-counter-demo-forked-glp2dw?file=%2Fsrc%2FApp.jsx%3A71%2C26

如何使用现有代码实现此目的？

Answer 1

可以通过

validate

组件中的属性

Field

https://formik.org/docs/api/field#validate

像这样

  <Field
    name={`tickets.${i}.name`}
    type="text"
    className={
      "form-control" +
      (ticketErrors.name && ticketTouched.name
        ? " is-invalid"
        : "")
    }
    validate={(name) =>
      values.tickets.some(
        (anotherTicket, anotherTicketIndex) => anotherTicket.name === name && i !== anotherTicketIndex
      ) && "Repeated name"
    }
  />

另一个解决方案是在提交时设置此错误

如果您检查文档https://formik.org/docs/api/formik#onsubmit-values-values-formikbag-formikbag--void--promiseany

您可以使用传递给提交函数的第二个参数来设置错误

像这样

  function onSubmit(fields, formikbag) {
    if (/* check if fields.tickets has unique names and emails */) {
      formikbag.setErrors()
      return;
    }

    // display form field values on success
    alert("SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4));
  }