如何在React.js中使用sort函数对DD/MM/YY格式日期进行排序

代码存在的问题 #

• 基础拼写与语法错误
  • React Hook 命名错误：Usestate、UseMemo 首字母应该小写，正确写法为 useState、useMemo
  • 变量名大小写不一致：processedDataBychoice、processedDataByChoice、processedDatabyChoice 三个拼写不统一，会触发引用报错
  • useMemo 没有返回值：finalData 对应的 useMemo 没有把排序后的结果返回，最终finalData为undefined
  • 依赖项错误：useMemo 依赖项里的sortBy未在你提供的代码中定义，同时你也没有根据sortOrder的状态控制升序/降序逻辑
  • 原地排序问题：Array.sort()是原地修改数组的方法，直接修改processedDataByChoice会改变原引用数组的内容，不符合React不可变数据原则
• 核心排序逻辑错误
  你使用的日期格式是DD/MM/YY，原生new Date()解析这类格式字符串时，会默认将第一个数值识别为月份、第二个为日期，比如10/05/24会被解析为2024年10月5日，而非你预期的2024年5月10日，解析结果完全错误自然无法得到正确的排序结果。

可行实现方案 #

首先写一个专门解析DD/MM/YY格式日期的工具函数，再修复所有语法和逻辑错误，参考代码如下：

import { useState, useMemo } from 'react';

// 解析DD/MM/YY格式日期为时间戳，用于排序
const parseDDMMYY = (dateStr) => {
  const [day, month, year] = dateStr.split('/').map(Number);
  // YY格式默认补20，如果你需要兼容19xx的日期可以自行调整逻辑
  return new Date(2000 + year, month - 1, day).getTime();
};

// 组件内逻辑
const YourComponent = () => {
  const [sortOrder, setSortOrder] = useState('desc'); // 可选值：asc/desc/default
  // 这里请确保你的原始数据data已经正确定义

  const processedDataByChoice = useMemo(() => {
    // 原有代码中的a.data未明确含义，已保留逻辑请你自行核对
    return data.map((row, index) => {
      row.main = a.data; 
      return row;
    });
  }, [data]);

  const finalData = useMemo(() => {
    // 先拷贝数组，避免原地修改原数据
    const sortedData = [...processedDataByChoice];
    if (sortOrder === 'default') return sortedData;
    
    sortedData.sort((rowA, rowB) => {
      const timeA = parseDDMMYY(rowA.main.last);
      const timeB = parseDDMMYY(rowB.main.last);
      // 根据排序方向返回结果
      return sortOrder === 'asc' ? timeA - timeB : timeB - timeA;
    });
    return sortedData;
  }, [sortOrder, processedDataByChoice]);

  return (
    <table>
      {finalData.map((row, index) => {
        const main = row.main;
        return <tr key={index}><td>{main.last}</td></tr>;
      })}
    </table>
  );
};

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