React表格按日期时间升序排序失效问题求助

你的排序逻辑存在关键错误：将YYYY/MM/DD格式的日期反转拼接成了DD-MM-YYYY，这种非标准ISO格式的字符串在不同JavaScript环境中会被错误解析，导致Date对象无效或时间戳计算错误，最终排序失效。

错误原因 #

原始日期格式是YYYY/MM/DD（比如"2024/05/20"），你的代码通过split('/').reverse().join('-')得到的是"20-05-2024"，这不符合ISO 8601的YYYY-MM-DD标准格式。部分浏览器会将这种格式错误解析为MM-DD-YYYY，甚至直接返回Invalid Date，导致排序时的时间戳比较完全失效。

修正后的代码 #

只需要将日期格式直接转换为YYYY-MM-DD即可，不需要反转：

const sortedDataForms = [...dataForms].sort((a, b) => {
  // 将YYYY/MM/DD转换为标准ISO日期格式YYYY-MM-DD
  const isoDateA = a.date.split('/').join('-');
  const isoDateB = b.date.split('/').join('-');
  
  const datetimeA = new Date(`${isoDateA}T${a.time}`);
  const datetimeB = new Date(`${isoDateB}T${b.time}`);
  
  // 兜底处理：如果日期无效，避免排序混乱
  if (isNaN(datetimeA.getTime()) || isNaN(datetimeB.getTime())) {
    console.error('无效的日期时间格式', a, b);
    return 0;
  }
  
  return datetimeB - datetimeA;
});

额外排查步骤 #

• 验证Date对象有效性：在排序函数中添加console.log(datetimeA, datetimeB)，确认没有Invalid Date输出。
• 检查原始字段格式：确保所有date字段严格遵循YYYY/MM/DD，time字段严格遵循HH:mm:ss，无多余空格或非法字符。
• 确认数组复制：你已经用[...dataForms]复制了原数组，避免了原地修改原数据的问题，这部分是正确的。

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