如何在React Table中将映射数据以列表展示（单成员对应多任务ID）

1. 数据预处理 #

先把成员数据和任务数据做关联，将同一成员ID下的任务ID聚合到一起。假设你有两组原始数据：成员列表members和任务列表tasks，可以用数组reduce方法完成分组：

// 示例原始数据
const members = [
  { id: 'member1', name: '张三' },
  { id: 'member2', name: '李四' }
];

const tasks = [
  { taskId: 'task001', memberId: 'member1' },
  { taskId: 'task002', memberId: 'member1' },
  { taskId: 'task003', memberId: 'member2' }
];

// 按memberId分组任务ID
const memberTasksMap = tasks.reduce((acc, task) => {
  if (!acc[task.memberId]) {
    acc[task.memberId] = [];
  }
  acc[task.memberId].push(task.taskId);
  return acc;
}, {});

// 合并成表格所需的数据源
const tableData = members.map(member => ({
  ...member,
  taskIds: memberTasksMap[member.id] || []
}));

2. 配置React Table列与渲染 #

在React Table的列配置中，针对任务ID列自定义单元格渲染逻辑，将数组形式的任务ID渲染成列表：

import { useTable } from 'react-table';

function MemberTaskTable() {
  // 定义表格列
  const columns = [
    {
      Header: '成员ID',
      accessor: 'id'
    },
    {
      Header: '成员名称',
      accessor: 'name'
    },
    {
      Header: '关联任务ID',
      accessor: 'taskIds',
      // 自定义单元格渲染
      Cell: ({ value }) => (
        <ul style={{ margin: 0, paddingLeft: '1.2rem' }}>
          {value.map(taskId => (
            <li key={taskId}>{taskId}</li>
          ))}
        </ul>
      )
    }
  ];

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
    columns,
    data: tableData
  });

  // 渲染表格
  return (
    <table {...getTableProps()} style={{ borderCollapse: 'collapse', width: '100%' }}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()} style={{ border: '1px solid #ddd', padding: '8px' }}>
                {column.render('Header')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()} style={{ border: '1px solid #ddd', padding: '8px' }}>
                  {cell.render('Cell')}
                </td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export default MemberTaskTable;

关键说明 #

• 如果你的数据已经是聚合好的（每条成员数据自带taskIds数组），可直接跳过数据预处理步骤。
• 任务ID的展示样式可按需调整，比如用逗号分隔的文本、自定义卡片等，不局限于列表形式。
• 确保每个任务ID有唯一key值，避免React渲染警告。

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