Reactjs Yup动态复选框字段的验证

我试图将yup验证添加到动态创建的复选框数组的react钩子表单中，但似乎无法确定yup验证部分

我希望实现的功能如下：必须选中阵列中的至少一个复选框才能向前移动。我假设这将由

is\u active

键/值对验证，以确定它是否设置为true

当前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>
    );
})}

提交时返回的对象：

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>
    );
})}

动态创建的复选框数组：

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.map（（option）=>{
const optionKey=option.id；
const name=`options[${optionKey}]。是否处于活动状态`；
返回(
{option.name}
);
})}

我当前收到的错误：

---

选项必须是“数组”类型，但最终值为：“null”

您正在使用

选项键作为数组索引。因此，您的代码将被评估为如下内容



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



您的模式也应该是这样的

Yup.object（）.shape({
是否处于活动状态：是。布尔（），
})

现场演示
您正在使用
optionKey
作为数组索引。因此，您的代码将被评估为如下内容



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



您的模式也应该是这样的

Yup.object（）.shape({
是否处于活动状态：是。布尔（），
})

现场演示