是的（使用formik和react）-无法验证数组长度

Question

是的，有点新，我不知道如何验证数组不为空。

我正在使用 React + Formik + yup + Material-ui

这是我创建的一个示例：

https://codesandbox.io/s/new-fire-29onf?file=/src/App.js

我尝试在validationSchema中只使用所需的方法：

validationSchema={Yup.object({ permissions : Yup.array().required('permission cant be empty') })}

我尝试使用这样的测试方法添加我的功能：

validationSchema={Yup.object({ permission: Yup.array().test ('notEmptyArr', 'array is empty', (value) =>{ console.log(value); return value.length > 0; }) })}

我还尝试向数组添加方法，如下所示：

Yup.addMethod(Yup.array, "notEmpty", function(message) { return this.test("notEmpty", message, function(arr) { return Boolean( arr.length > 0 ); }); });

但这些都不适合我:(

如果我删除验证，我会看到 value.permission 确实是一个数组，带有值（如果选择）

我究竟做错了什么？

谢谢

Answer 1

您可以使用.min()：

validationSchema={Yup.object({
    permissions: Yup.array().min(1)
})}

Answer 2

更新/警告：

\n

以前只array().required()需要确保数组中至少有 1 项。例如[]无法通过测试。

\n

\xe2\x9a\xa0\xef\xb8\x8f 自版本0.31.0 (2020-11-23)起，行为发生了array().required()变化！现在要确保数组中至少有 1 个项目，您需要确保：array().required().min(1)

\n