React MUI Datatables：合并除时间外值相同的行并显示最后一条

要实现只保留除时间字段外其余字段相同行的最后一条（时间最晚的记录），核心思路是先预处理数据，再将处理后的结果传给表格组件渲染，具体步骤如下：

1. 预处理原始数据 #

遍历原始数据，根据除时间外的字段生成唯一标识，只保留每个标识下时间最晚的行。示例代码如下：

// 示例原始数据
const rawData = [
  { id: 1, name: "张三", value: 100, time: "2024-01-01 10:00" },
  { id: 2, name: "张三", value: 100, time: "2024-01-01 11:00" },
  { id: 3, name: "李四", value: 200, time: "2024-01-01 09:00" },
];

// 数据去重处理函数：保留同组内时间最晚的行
const filterLatestRows = (data) => {
  const uniqueMap = {};

  data.forEach(row => {
    // 生成唯一键：排除time字段，拼接其余字段值作为分组标识
    const uniqueKey = Object.keys(row)
      .filter(key => key !== 'time')
      .map(key => row[key])
      .join('|'); // 用特殊字符分隔，避免字段值拼接冲突

    // 对比时间，更新为最新的行
    if (!uniqueMap[uniqueKey] || new Date(row.time) > new Date(uniqueMap[uniqueKey].time)) {
      uniqueMap[uniqueKey] = row;
    }
  });

  // 将处理后的对象转为数组返回
  return Object.values(uniqueMap);
};

// 得到去重后的数据集
const filteredData = filterLatestRows(rawData);

2. 传入MUI Datatables渲染 #

将预处理后的filteredData直接传给表格组件，正常配置列和选项即可：

import MUIDataTable from "mui-datatables";

// 表格列配置
const columns = [
  { name: "id", label: "ID" },
  { name: "name", label: "姓名" },
  { name: "value", label: "数值" },
  { name: "time", label: "时间" },
];

// 表格选项配置（按需调整）
const tableOptions = {
  pagination: true,
  sort: true,
  filter: true,
};

export default function DataTable() {
  return (
    <MUIDataTable
      title="业务数据"
      data={filteredData}
      columns={columns}
      options={tableOptions}
    />
  );
}

注意事项 #

• 如果行中包含对象类型的字段，生成uniqueKey时要用JSON.stringify()处理该字段，避免拼接错误
• 若时间字段格式非标准（如时间戳），需调整时间对比逻辑，确保能正确判断先后顺序
• 数据量较大时，建议后端直接返回去重后的结果，减少前端计算压力

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