React JS实现表格数据按日期降序排序功能求助

看起来你遇到的核心问题是排序逻辑方向不符合预期，另外直接用字符串比较日期虽在YYYY-MM-DD格式下可行，但转换成Date对象比较会更稳妥（能避免非标准日期格式导致的比较错误）。

问题分析 #

你当前的排序代码是按升序排列的：

.sort((arr1, arr2) => {
  if (arr1[0].date < arr2[0].date) { return -1; }
  else if (arr1[0].date > arr2[0].date) { return 1; }
  return 0;
})

这段逻辑会让更早的日期（字符串值更小的）排在前面，和你想要的「最新日期在前」的降序需求正好相反。

修正后的代码 #

调整排序逻辑为降序，同时改用Date对象来确保日期比较的准确性：

const groupedByDate = res.data.reduce((meals, meal) => {
  if (meal.date in meals) {
    meals[meal.date].push(meal);
  } else {
    meals[meal.date] = [meal];
  }
  return meals;
}, {});

// 修正排序逻辑：按日期降序排列
const sortedOnDate = Object.values(groupedByDate).sort((arr1, arr2) => {
  // 将日期字符串转为Date对象，确保比较逻辑可靠
  const date1 = new Date(arr1[0].date);
  const date2 = new Date(arr2[0].date);
  // 降序：date2 - date1 会让时间戳更大的（更晚的）日期排在前面
  return date2 - date1;
});

setData(sortedOnDate);

关键改动说明 #

1. 降序逻辑调整：用date2 - date1代替原有的字符串比较，Date对象相减会返回时间戳差值，差值为正说明date2更晚，会被排在前面，正好实现降序需求。
2. Date对象比较：避免了如果日期格式不是YYYY-MM-DD（比如MM/DD/YYYY）时，字符串比较失效的问题，兼容性更强。

简洁版优化（可选） #

如果你的日期格式确定是YYYY-MM-DD，也可以直接用字符串反向比较实现降序，代码更简洁：

const sortedOnDate = Object.values(groupedByDate).sort((arr1, arr2) => {
  // 用localeCompare反向比较字符串，实现降序
  return arr2[0].date.localeCompare(arr1[0].date);
});

这样修改后，分组后的数组就会按日期从新到旧降序排列了。

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