Yup验证动态复选框字段

Question

我试图将yup验证添加到动态创建的复选框数组的react-hook-form中，但似乎无法确定Yup验证部分。

我要完成的功能如下：必须选中数组中的至少一个复选框以继续前进。我假设可以通过is_active键/值对来验证它，以确定它是否设置为true？

https://codesandbox.io/s/icy-dew-9un1c

当前Yup验证：

const optionValidation = Yup.object().shape({
  options: Yup.array()
    .of(
      Yup.object().shape({
        is_active: Yup.boolean().oneOf([true]),
      })
    )
    .required('Must choose at least one option.'),
});

提交时返回的对象：

"options":{
    "option1": {
        "id":"option1"
        "is_active": true
    }
    "option2": {
        "id":"option2"
        "is_active": false
    }
    ...
}

动态创建的复选框数组：

{options.map((option) => {
    const optionKey = option.id;
    const name = `options[${optionKey}].is_active`;

    return (
        <Col lg={4} key={optionKey}>
            <div className={`onboard__label ${option.is_active ? "is-checked" : ""}`}>
                {option.name}
                <input
                  type="hidden"
                  name={`options[${optionKey}].id`}
                  defaultValue={optionKey}
                  ref={register}
                />
                <input
                  type="checkbox"
                  ref={register}
                  name={name}
                  defaultChecked={option.is_active}
                />
            </div>
        </Col>
    );
})}

我当前遇到的错误： options must be a 'array' type, but the final value was: 'null'

Answer 1

您正在使用optionKey作为数组索引。因此您的代码将被评估为类似的

<input name='options[option1]' />
<input name='options[option2]' />
<input name='options[option3]' />

但是您需要做的是分配name[index]，其中index是一个数字，如docs

所示。

<input name='options[0]' />
<input name='options[1]' />
<input name='options[2]' />

您的架构也应该看起来像这样

Yup.object().shape({
   is_active: Yup.boolean(),
})

实时演示