React MUI自定义数据表格排序功能点击后不生效问题

点击排序时控制台可见order、orderBy状态正常更新，说明状态触发逻辑无问题，故障出在排序执行环节，核心问题和修复方式如下：

核心问题 #

• 表头列配置与实际数据字段完全不匹配：headCells的列ID直接复制了官方示例的name/calories/fat/carbs/protein，但实际渲染的行数据字段为category/tripStartTimeStr/drivingTimeMinsStr等，排序时读取对应字段值全为undefined，比较器无法计算排序结果。
• 初始排序字段无效：默认orderBy设为不存在的calories字段，首次加载时排序逻辑就无法正常执行。
• 比较器逻辑不适配业务字段：默认比较逻辑直接用</>对比值，遇到时间字符串、带格式的数字字符串时，会按字典序排序，结果不符合预期。
• 冗余代码干扰：复制官方示例遗留的createData函数未被任何逻辑调用，无实际作用。
• 列表渲染缺失key属性：遍历生成TableRow时未传key，会触发React渲染警告，极端场景下可能导致渲染不更新。

修复代码 #

1. 修正表头列配置，替换为实际业务字段 #

const headCells = [
  {
    id: "category",
    numeric: false,
    disablePadding: true,
    label: "分类",
  },
  { id: "tripStartTimeStr", numeric: false, disablePadding: false, label: "行程开始时间" },
  { id: "drivingTimeMinsStr", numeric: true, disablePadding: false, label: "驾驶时长" },
  { id: "distanceDriven", numeric: true, disablePadding: false, label: "行驶距离" },
  { id: "smoothTurning", numeric: true, disablePadding: false, label: "平稳转弯评分" },
];

2. 修改初始排序字段为真实存在的字段 #

// 原代码初始值为calories，替换为实际字段，比如行程开始时间
const [orderBy, setOrderBy] = React.useState("tripStartTimeStr");

3. 优化比较器，适配不同类型字段的排序规则 #

function descendingComparator(a, b, orderBy) {
  const valA = a[orderBy];
  const valB = b[orderBy];
  // 空值兜底排序
  if (valA == null && valB == null) return 0;
  if (valA == null) return 1;
  if (valB == null) return -1;
  // 数字类型直接做差比较
  if (typeof valA === 'number' && typeof valB === 'number') {
    return valB - valA;
  }
  // 时间字符串转时间戳比较
  if (orderBy === 'tripStartTimeStr') {
    return new Date(valB).getTime() - new Date(valA).getTime();
  }
  // 字符串类型支持中文、数字混合排序
  if (typeof valA === 'string' && typeof valB === 'string') {
    return valB.localeCompare(valA, 'zh-CN', { numeric: true });
  }
  // 兜底比较逻辑
  if (b[orderBy] < a[orderBy]) return -1;
  if (b[orderBy] > a[orderBy]) return 1;
  return 0;
}

4. 修正表格行渲染，补充key属性 #

<TableBody>
  {stableSort(data, getComparator(order, orderBy)).map(
    (row, index) => {
      const labelId = `enhanced-table-checkbox-${index}`;
      return (
        // 补充key属性，优先用数据唯一ID，没有就用index兜底
        <TableRow hover key={row.id || index}>
          <TableCell
            component="th"
            id={labelId}
            scope="row"
            padding="none"
          >
            {row.category}
          </TableCell>
          <TableCell component="th" scope="row">
            {row?.tripStartTimeStr}
          </TableCell>
          <TableCell align="center">
            {row?.drivingTimeMinsStr}
          </TableCell>
          <TableCell align="center">
            {row?.distanceDriven + " " + row?.distanceMetric}
          </TableCell>
          <TableCell align="center">{row?.smoothTurning}</TableCell>
        </TableRow>
      );
    }
  )}
</TableBody>

5. 删除冗余代码 #

直接删除未被调用的createData函数即可。

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