Formik Yup `.test()` 自定义验证无法正常工作

Question

我使用 .test() 创建了一个自定义 Yup 验证。

// users is an array of strings
user: Yup.string().test(
  "user-check",
  "At lease one user should be added",
  () => users.length > 0
)

目标是在添加至少一个用户时验证表单。输入字段可让您输入用户名（任何字符串值），然后单击按钮将其添加到列表中。

在添加第二个用户名（或添加第一个然后开始在字段上输入）后，验证运行良好。 我正在分享这个现场演示：https://codesandbox.io/s/hopeful-goldwasser-shpbk

复制步骤

1. 点击文本字段。
2. 输入用户名。
3. 点击红色按钮。

预期

• 表格应该是有效的。

你会得到什么

• 表单无效

对这种奇怪的行为有任何反馈吗？

备注

• 我不确定这是否是问题的根源。

• 第一次添加用户时，会调用两次验证：第一次使用空的users 数组，然后使用正确的users 值（即您添加的用户）！

Answer 1

Formik 表单的范围目前仅包含用户的输入字段。包含用户的数组当前不属于您的表单（不包含在初始值中）。有两种想法可以做：

• 将用户数组移动到您的 Formik 范围内。例如，使用 FieldArray (https://jaredpalmer.com/formik/docs/api/fieldarray)。然后，您可以像现在一样进行验证。
• 在运行onSubmit 时手动进行验证。比如这样：

  const onSubmit = () => {
    if (users.length > 0) {
       // there are some users (form is valid) -> do API call or whatever necessary
    } else {
       // no users (form is not valid) -> display some error
    }
  };

您甚至可以像这样禁用提交按钮（如果使用 Formik，这不是正确的方法）：

<input type="submit" value="Submit" disabled={users.length === 0} />

我希望这会有所帮助。如果您有任何问题，请告诉我，我可以更新我的答案。

Answer 2

试试

user: Yup.string().test(
  "user-check",
  "At lease one user should be added",
  async (users) => await users.length > 0
)