ReactJS中基于创建日期对对象数组进行有序展示

首先，你的排序逻辑里有个关键问题：new Date(a.createdAt).toUTCString()会把日期转换成字符串格式，字符串之间做减法运算会得到NaN，根本起不到排序作用。咱们直接用Date对象本身或者它的时间戳来比较就好，这才是正确的姿势。

修正后的完整代码 #

const display = todoList 
.sort((a, b) => {
  // 直接用Date对象做减法，会自动转换为时间戳差值，实现正序（旧条目在前）
  return new Date(a.createdAt) - new Date(b.createdAt);
  // 如果想要倒序（最新条目在前），就反过来写：
  // return new Date(b.createdAt) - new Date(a.createdAt);
})
.map((item) => (
 <tr key={item.id}>
 <td>{item.title}</td>
 {/* 注意：这里的字段名要和数据源一致！你排序用的是createdAt（小写c），这里写的是CreatedAt（大写C），要统一 */}
 <td>{new Date(item.createdAt).toUTCString()}</td>
 <td>
 <button onClick={() => Update(item.id)} className="btn btn-success">
 Update
 </button>
 </td>
 <td>
 {/* Bootstrap类名是全小写的，btn-Danger要改成btn-danger，不然样式不生效 */}
 <button onClick={() => remove(item.id)} className="btn btn-danger">
 Delete
 </button>
 </td>
 </tr>
));

几个重要提醒 #

• 字段名大小写统一：你排序时用的是a.createdAt（小写c），但渲染日期时写的是item.CreatedAt（大写C），一定要和后端返回的字段名完全一致，否则会出现日期显示错误或者排序失效的情况。
• Bootstrap类名规范：btn-Danger不符合Bootstrap的类名规则，要改成全小写的btn-danger，否则按钮的危险样式不会生效。
• 排序方向切换：如果需要最新的条目排在前面，只需要把排序函数里的两个Date对象调换位置即可。

这样修改后，就能正确按照创建日期的先后顺序对条目进行排序了。

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