React.js中实现预订记录按日期及小时排序的问题求助

解决方案 #

你当前代码直接遍历原始bookings数组，没有做排序处理，所以默认按数组原始存储顺序（即创建顺序）渲染，需要在遍历前对数组按日期时间规则排序即可。
注意排序前先对原数组做浅拷贝，不要直接修改原数组避免产生不必要的副作用，排序逻辑可参考以下代码：

// 浅拷贝原数组后升序排序：年>月>日>时>分
const sortedBookings = [...bookings].sort((a, b) => {
  if (a.year !== b.year) return a.year - b.year
  if (a.month !== b.month) return a.month - b.month
  if (a.day !== b.day) return a.day - b.day
  if (a.hour !== b.hour) return a.hour - b.hour
  return a.minutes - b.minutes
})

注意事项

排序后数组的索引和原始数组顺序不一致，你原有代码中deleteBooking方法是传入索引删除数据，会出现删除错误的问题，建议修改为通过booking.id匹配删除数据，对应渲染代码调整如下：

<Card className="my-4 booking-profile">
  <Card.Body>
    <Card.Title>
      {sortedBookings.map((booking) => {
        console.log(booking.id);
        return (
          <ul key={booking.id}>
            <li>
              <span>
                {" "}
                Tu reserva: {booking.day}/{booking.month}/{booking.year} a las{" "}
                {booking.hour}:{booking.minutes}
              </span>
              <i
                onClick={() => {
                  deleteBooking(booking.id);
                }}
                className="fas fa-trash-alt delete"
              ></i>
            </li>
          </ul>
        );
      })}
    </Card.Title>
  </Card.Body>
</Card>

如果需要实现降序排序，把排序逻辑中return语句前后的两个变量调换即可，比如return b.year - a.year。

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