React Table日期列排序异常：字母序及TypeScript报错求助

问题说明 #

对React Table的日期列排序时，当前默认按字母顺序排序，自定义sortType逻辑时触发TypeScript错误。

数据示例 #

[{
    "date": "Jun-2022"
  },
  {
    "date": "Jul-2022"
  },
  {
    "date": "Nov-2022"
  }
]

列配置代码 #

columns = [
    {
        Header: 'MONTH',
        accessor: 'date',
        // sortType: (a:any, b:any) => {
        //     return new Date(b.values.date) - new Date(a.values.date);
        // }
    },
]

报错信息（翻译后） #

算术运算的左侧必须是'any'、'number'、'bigint'类型或枚举类型。ts(2362)

解决方案 #

报错根源：

1. 部分环境下new Date("Jun-2022")会返回无效日期（Invalid Date），无法参与数值运算
2. React Table的sortType参数中，行对象的日期值不应通过values.date获取，需用original.date或直接取行对象的对应属性

修正后的列配置代码：

columns = [
    {
        Header: 'MONTH',
        accessor: 'date',
        sortType: (a, b) => {
            // 解析"MMM-YYYY"格式为合法Date对象
            const parseMonthYear = (dateStr: string) => {
                const [month, year] = dateStr.split('-');
                return new Date(`${month} 1, ${year}`);
            };

            const dateA = parseMonthYear(a.original.date);
            const dateB = parseMonthYear(b.original.date);

            // 过滤无效日期，避免运算报错
            if (isNaN(dateA.getTime()) || isNaN(dateB.getTime())) {
                return 0;
            }

            // 用时间戳做数值运算，满足TypeScript类型要求
            return dateB.getTime() - dateA.getTime(); // 降序，反转则为升序
        }
    },
]

核心要点 #

• 自定义解析函数处理非标准日期格式，确保Date对象有效
• 使用getTime()获取时间戳（数字类型）执行运算，规避类型错误
• 增加无效日期判断，防止排序逻辑异常

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