React角色权限页面Checkbox勾选报错：includes is not a function

1. 报错原因与修复 #

错误根源在onChange函数的勾选逻辑里：permissions.push(e.target.value)返回的是数组的新长度（数字类型），而非新数组。调用setUsersPermissions将这个数字赋值给permissions后，后续permissions.includes()自然会报错——因为数字类型没有includes方法。

修复时要遵循React状态不可变原则，创建新数组更新状态：

const onChange = (e) => {
  const { value, checked } = e.target;
  if (checked) {
    if (!permissions.includes(value)) {
      // 用扩展运算符生成新数组，避免修改原状态
      setUsersPermissions([...permissions, value]);
    }
  } else {
    // filter本身返回新数组，这部分逻辑无需修改
    const tempArray = permissions.filter(item => item !== value);
    setUsersPermissions(tempArray);
  }
};

2. 代码优化建议 #

作为React新手，还有几个可以优化的细节：

• 状态命名对齐：把setUsersPermissions改成setPermissions，和状态变量permissions对应，符合React useState的命名习惯。
• 避免重复渲染：用useMemo包裹items数组，防止组件每次渲染都重新创建数组：

import { useMemo } from 'react';

// ...

const items = useMemo(() => [
  {
    key: "1000",
    label: "Person",
    children: (
      <>
        <Row style={{ paddingBottom: 5 }}><Checkbox value="1000" checked={permissions.includes("1000")} onChange={onChange}>Read</Checkbox></Row>
        <Row style={{ paddingBottom: 5 }}><Checkbox value="1001" checked={permissions.includes("1001")} onChange={onChange}>Write</Checkbox></Row>
        <Row style={{ paddingBottom: 5 }}><Checkbox value="1002" checked={permissions.includes("1002")} onChange={onChange}>Delete</Checkbox></Row>
      </>
    ),
  },
  {
    key: "1100",
    label: "Company",
    children: (
      <>
        <Row style={{ paddingBottom: 5 }}><Checkbox value="1100" checked={permissions.includes("1100")} onChange={onChange}>Read</Checkbox></Row>
        <Row style={{ paddingBottom: 5 }}><Checkbox value="1101" checked={permissions.includes("1101")} onChange={onChange}>Write</Checkbox></Row>
        <Row style={{ paddingBottom: 5 }}><Checkbox value="1102" checked={permissions.includes("1102")} onChange={onChange}>Delete</Checkbox></Row>
      </>
    ),
  },
], [permissions]);

• 简化批量选择：可以用Ant Design的Checkbox.Group组件封装每个模块的权限选项，支持全选、批量操作，减少重复代码。

3. 角色权限学习资源推荐 #

• React状态基础：吃透useState、useReducer等状态API，理解状态不可变性的核心逻辑，这是处理权限类状态的基础。
• Ant Design组件实战：官方文档里的Checkbox、Collapse等组件示例，有很多权限管理场景的参考，比如树形权限选择、批量操作。
• RBAC模型：学习基于角色的访问控制（RBAC），理解角色、权限、用户三者的关联关系，这是前后端权限设计的核心框架。
• 前端权限实现：学习React中路由权限、按钮级权限的控制方式，比如用高阶组件、自定义Hook封装权限判断逻辑。

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