reactjs - 是的,验证对象数组最多包含一个对象,其中属性 = 值

标签 reactjs formik yup

我正在使用 Formik 的 FieldArray将对象动态添加到数组,将其他表单元素渲染为对象 push()编入数组。
我的架构如下所示:

const EMAIL_SCHEMA = Yup.object().shape({
  address: Yup.string().email().required( 'E-mail address is required.' ),
  isPreferredContact: Yup.boolean()
})

const SCHEMA = Yup.object().shape({
  emails: Yup.array()
             .of( EMAIL_SCHEMA )
             .ensure()
             .compact( v => !v.address )
             .required( 'At least one e-mail address is required.' )
})
对于每个电子邮件输入,都有一个相应的复选框来指示它是否是首选的联系电子邮件地址。不需要将电子邮件地址标记为首选。
我想做的是验证数组是否包含 最多一个 对象在哪里isPreferredContacttrue .如果数组中有 3 个电子邮件对象且 isPreferredContactfalse对他们所有人来说,这是一个有效的状态。也就是说:
let values = [
  {address: '1@email.com', isPreferredContact: false},
  {address: '2@email.com', isPreferredContact: false},
  {address: '3@email.com', isPreferredContact: false}
] // OK

let values = [
  {address: '1@email.com', isPreferredContact: true},
  {address: '2@email.com', isPreferredContact: false},
  {address: '3@email.com', isPreferredContact: false}
] // OK

let values = [
  {address: '1@email.com', isPreferredContact: true},
  {address: '2@email.com', isPreferredContact: true},
  {address: '3@email.com', isPreferredContact: false}
] // Invalid
我看到这个答案
Yup: deep validation in array of objects
显示 compact()方法可用于验证 至少一个 ,因为如果从数组中删除“假”值后,数组为空,那么很容易将架构键视为无效。
但是,我看不到任何用于验证数组是否包含 的内容。最多 一个具有属性 = 值谓词的对象。
有没有办法做到这一点?

最佳答案

在 GitHub 中查看 Yup 的问题后,盯着 API 文档(addMethod 的文档真的很糟糕),并在 Code Sandbox 中进行测试,我发现这有效:

Yup.addMethod(Yup.array, 'atMostOne', function(args) {
  const { message, predicate } = args
  return this.test('atMostOne', message, function(list) {
    // If there are 2+ elements after filtering, we know atMostOne must be false.
    return list.filter(predicate).length < 2
  })
})
显然,谓词是一个函数,它接受数组的一个元素并对其执行测试,返回 boolean .
对于标量值数组,这就像 el => el === value 一样简单.对于一组对象,它将是 el => el.property === valueel[property] === value .
希望这可以帮助其他对此感到好奇的人。

关于reactjs - 是的,验证对象数组最多包含一个对象,其中属性 = 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62564049/

相关文章:

reactjs - 如何将 Yup 验证架构与 `react-hook-form` lib 中的 Controller 组件一起使用

reactjs - 使用 Controller、yup 和 Material UI 的 React Hook Form - 验证问题

javascript - 无法显示 react 图片应用程序的 Canvas 元素

reactjs - 将元素添加到蓝图选择组件弹出窗口?

android - 您的项目的 SDK 版本 >= 33.0.0,但 expo 包版本似乎更旧

javascript - 单选按钮上的 React onChange 在父 div 元素上触发 onClick

reactjs - Expect(...).toBeInTheDocument 设置后不是函数

javascript - 对象可能是 'null' : TypeScript, React useRef & Formik innerRef

reactjs - 如何禁用 `deselect-option` 中的 `react-select` ?

reactjs - 是的,如何验证 react 选择