ReactJS父子组件复选框：获取完整权限选中对象集合问题

核心思路 #

将所有部门的权限状态统一托管在父组件UserTypePermissions中，子组件UserTypeCard仅负责渲染权限选项和触发状态更新，让父组件完整维护所有已修改部门的权限数据，最终生成符合要求的payload格式。

具体实现步骤 #

1. 父组件初始化全局权限状态 #

在UserTypePermissions中定义一个状态对象，用来存储所有部门的权限数据，结构示例如下：

const [allDeptPermissions, setAllDeptPermissions] = useState({
  // key为部门ID，value为对应权限数组
  dept_001: ['view_data', 'edit_setting'],
  dept_002: ['view_data']
});

2. 子组件传递更新回调 #

给每个UserTypeCard子组件传入当前部门的权限数据，以及触发权限更新的回调函数：

// UserTypePermissions组件内渲染子组件
{departmentList.map(dept => (
  <UserTypeCard
    key={dept.id}
    deptId={dept.id}
    currentPerms={allDeptPermissions[dept.id] || []}
    onPermChange={(deptId, updatedPerms) => {
      setAllDeptPermissions(prev => ({
        ...prev,
        [deptId]: updatedPerms
      }));
    }}
  />
))}

3. 子组件处理复选框变化 #

在UserTypeCard中，当复选框状态改变时，调用父组件传入的回调，把当前部门ID和更新后的权限数组回传：

// UserTypeCard组件内处理复选框切换
const handleCheckboxToggle = (permItem) => {
  let updatedPerms = [...currentPerms];
  updatedPerms = updatedPerms.includes(permItem)
    ? updatedPerms.filter(p => p !== permItem)
    : [...updatedPerms, permItem];
  
  // 触发父组件状态更新
  onPermChange(deptId, updatedPerms);
};

4. 生成服务端所需Payload #

在父组件中整理出指定ID和各部门权限数组的结构，直接提交即可：

const buildSubmitPayload = () => {
  return {
    targetId: '你的指定ID', // 替换为实际业务ID
    departmentPermissions: Object.entries(allDeptPermissions).map(([deptId, perms]) => ({
      deptId,
      permissions: perms
    }))
  };
};

可选优化 #

• 可以额外维护一个modifiedDeptIds集合，只记录有修改的部门ID，提交时仅打包这些部门的数据，减少请求体积。
• 初始化状态时，从服务端拉取所有部门的初始权限，确保前端状态和服务端数据一致。

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