React 如何按任务角色分栏渲染任务列表而非重复生成角色卡片？

问题核心 #

当前TaskList组件直接遍历全量平铺的任务数组做渲染，每个任务都会独立生成一个带角色标题的栅格列，自然会出现同角色任务被拆成多列、每列重复显示角色名的问题。要实现按角色分栏，确实需要先对原始任务做归集处理，但不需要针对每个角色单独写过滤逻辑——一次性完成全量任务的分组聚合，运行效率和可维护性都会更好。 #

具体实现步骤 #

1. 增加分组工具函数 #

把平铺的任务数组，按role字段聚合为「key为角色名，value为对应角色任务列表」的结构。这里一定要注意保留任务在原tasks数组里的索引，否则后续触发完成、编辑、删除操作时，会出现操作定位错位的问题：

const groupTasksByRole = (tasks) => {
  return tasks.reduce((grouped, task, originalIndex) => {
    const currentRole = task.role;
    // 当前角色的分组不存在时，初始化空数组
    if (!grouped[currentRole]) grouped[currentRole] = [];
    // 存入任务本体 + 原数组索引，供后续操作使用
    grouped[currentRole].push({ ...task, originalIndex });
    return grouped;
  }, {});
};

2. 改造TaskList渲染逻辑 #

拿到分组后的对象后，先遍历所有角色生成分栏，每个分栏只渲染一次角色标题，再在分栏内部遍历当前角色下的任务列表渲染卡片，同时把任务操作方法透传给TaskCard（原代码中这部分透传是缺失的，会导致点击按钮时报错方法未定义）：

const TaskList = ({ tasks, completeTask, editTask, removeTask }) => {
  // 对全量任务做一次分组聚合
  const groupedTasks = groupTasksByRole(tasks);
  // 取出所有需要展示的角色列表
  const roleColumns = Object.keys(groupedTasks);

  return (
    <Container>
      <Row>
        {/* 遍历每个角色生成独立分栏 */}
        {roleColumns.map((role) => (
          <Col sm="12" md="4" key={role}>
            {/* 每个分栏仅显示一次角色标题 */}
            <h4 style={{ textAlign: 'center' }}>{role}</h4>
            {/* 渲染当前角色下的所有任务卡片 */}
            {groupedTasks[role].map((task) => (
              <TaskCard 
                task={task}
                // 传入原数组的索引，保证操作定位准确
                index={task.originalIndex}
                // 透传任务操作方法
                completeTask={completeTask}
                editTask={editTask}
                removeTask={removeTask}
              />
            ))}
          </Col>
        ))}
      </Row>
    </Container>
  );
};

补充说明 #

• 不需要针对每个角色单独写filter过滤逻辑：后续新增角色值时，代码会自动识别并生成对应分栏，不需要手动修改过滤判断，维护成本更低。
• 如果后续需要给不同角色的分栏做样式区分（比如给不同角色的任务栏加不同的背景色、边框），可以直接在Col标签上根据当前遍历的role值匹配自定义CSS类即可。
• 原有TaskCard组件的交互逻辑不需要改动，只要父组件正确透传操作方法，完成、编辑、删除的原有交互就能正常运行。

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