React笔记组件列表排序：如何在不干扰map的情况下按日期排序？

首先咱们得明确：不要直接修改传入的notes数组（因为sort()是原地修改数组的方法，会改变原数据，可能引发意想不到的副作用），正确的做法是先创建数组副本，排序后再用来渲染。

1. 正确的排序位置（在map之前处理） #

你可以在组件的渲染逻辑里，先对notes的副本进行排序，再传给map：

import React from "react";
import { Link } from "react-router-dom";
import dayjs from "dayjs";
import "./plan-list.css";

function renderDate(date) {
  let d = dayjs(date);
  return d.format("MMMM D YYYY, HH:mm");
}

const Note = ({ note: { _id, title, body, updatedAt, date } }) => (
  <Link to={`/notes/${_id}`}>
    <div className="notes-list-item">
      <h2>{title}</h2>
      <span className="notes-list-date">{renderDate(date)}</span>
    </div>
  </Link>
);

export default ({ notes }) => (
  <div className="notes-list">
    {/* 先创建数组副本再排序，避免修改原数据 */}
    {[...notes].sort((a, b) => {
      // 用原始date字段转时间戳对比，保证排序逻辑准确
      return dayjs(a.date).valueOf() - dayjs(b.date).valueOf();
      // 若要最新笔记在前，只需调换顺序：dayjs(b.date).valueOf() - dayjs(a.date).valueOf()
    }).map(note => (
      <Note note={note} key={`note-${note._id}`} />
    ))}
  </div>
);

2. 为什么不能用renderDate的结果排序？ #

你尝试的notes.sort((a, b) => (a.{renderDate(date)} > b.{renderDate(date)}) ? 1 : -1)存在两个问题：

• 语法错误：a.{renderDate(date)}是无效写法，无法通过这种方式调用函数处理数组项的date字段
• 逻辑错误：renderDate返回的是格式化后的字符串（比如"January 1 2024, 10:00"），字符串的字典序和日期的时间序并不完全匹配。例如"December 31 2023"的字符串会排在"January 1 2024"前面，但实际日期后者更新，这会导致排序结果错误。

所以必须用原始的date字段，通过dayjs转换为时间戳来对比，这样排序才准确。

3. 可选优化：抽离排序逻辑 #

如果排序逻辑需要复用或调整，可以把它抽成组件内部的独立函数，让代码更清晰：

export default ({ notes }) => {
  // 按日期升序排序（旧笔记在前）
  const getSortedNotes = () => {
    return [...notes].sort((a, b) => {
      return dayjs(a.date).valueOf() - dayjs(b.date).valueOf();
    });
  };

  return (
    <div className="notes-list">
      {getSortedNotes().map(note => (
        <Note note={note} key={`note-${note._id}`} />
      ))}
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Nick Carducci for Carface Bank