Next.js 13 React组件中TypeScript对象数组排序失效问题

可能的核心原因 #

• avgTime 类型不符：虽然 JSON.stringify 输出显示为数字，但 getContentObjectForRanking() 返回的数组中，avgTime 实际可能是字符串类型。手动定义的测试数组里 avgTime 是数字，排序逻辑正常；而字符串类型的数值在减法运算时的隐式转换会导致排序异常。
• 数组不可修改：如果原数组被 Object.freeze() 冻结，sort 方法的原地修改会静默失效，因为冻结的数组不允许变更元素顺序。
• React 引用副作用：Next.js 中若 contentObject 关联服务器缓存或 React 状态，原地排序不会改变数组引用，控制台可能展示缓存的旧顺序，而非实际排序后的结果。

解决步骤 #

1. 强制转换数值类型 #

修改排序回调，确保参与计算的是数字类型：

const sortedArray = [...contentObject].sort((a, b) => {
  const timeA = Number(a.avgTime);
  const timeB = Number(b.avgTime);
  return timeA - timeB;
});

2. 创建数组副本再排序 #

避免原地修改原数组，彻底规避冻结或引用问题：

// 方式1：扩展运算符创建副本
const sortedArray = [...contentObject].sort((a, b) => Number(a.avgTime) - Number(b.avgTime));

// 方式2：Array.from 创建副本
const sortedArray = Array.from(contentObject).sort((a, b) => Number(a.avgTime) - Number(b.avgTime));

3. 验证数据类型 #

在排序前打印元素类型，确认问题根源：

contentObject.forEach(item => console.log(`name: ${item.name}, avgTime类型: ${typeof item.avgTime}, 值: ${item.avgTime}`));

4. 检查数组可写性 #

确认数组是否被冻结：

console.log("数组是否可扩展：", Object.isExtensible(contentObject));

若返回 false，说明数组被冻结，必须通过创建副本的方式排序。

验证测试代码 #

将以下代码替换到组件中快速验证：

const contentObject = getContentObjectForRanking();
// 先检查类型
contentObject.forEach(item => console.log(typeof item.avgTime, item.name));

// 执行排序
const sortedArray = [...contentObject].sort((a, b) => {
  return Number(a.avgTime) - Number(b.avgTime);
});
console.log("排序结果：", sortedArray);

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