基于用户权限数组设置Checkbox选中状态的问题排查

核心问题 #

你用userRoles.map()生成了一个布尔值数组，但checked属性需要的是单个布尔值。在JavaScript里，非空数组属于“真值”，所以所有Checkbox都会被判定为选中状态。

修复代码 #

把map换成some方法，它会遍历数组并返回是否存在符合条件的元素：

return (
    <>
        {listOfRights.map((item, index) => {
            // 用some判断当前权限是否在用户拥有的角色中
            const roleChecked = userRoles.some((role) => role.RoleId === item.id);
            return <Form.Check
                key={index}
                inline
                name="userRights"
                isInvalid={!!errors.user_rights}
                label={getRightsTitle(item.roleName)}
                value={item.id}
                onChange={handleChange}
                id={`user_rights-${item.id}`}
                checked={roleChecked}
            />
         })}
    </>
)

补充说明 #

• some()方法会在找到第一个匹配项时就停止遍历，性能比filter()后判断长度更优
• 如果你需要兼容旧环境，也可以用userRoles.filter(role => role.RoleId === item.id).length > 0，效果一样但效率稍低

内容的提问来源于stack exchange，提问作者udarts