ReactJS中array.sort排序失效？我的产品数组排序语句哪里有问题

问题排查 #

1. Array.sort() 是原地排序方法，直接修改原数组，不会返回新数组。如果你用的是React，直接修改state中的原数组不会触发组件重渲染，界面自然看不到排序效果
2. 你对product_name、store_name这两个字符串字段用减法比较，减法会强制把字符串转为数字，最终得到NaN，排序逻辑完全失效
3. 你最初尝试的products.sort(p => p.product_name)不符合sort方法的回调要求：sort的比较函数需要接收a、b两个参数，返回负数、0、正数来决定两者的先后顺序，单参数写法没有任何排序效果

修复代码 #

// 先浅拷贝原数组，再排序，避免修改原数据，React中必须这么做才能触发重渲染
const sortedProducts = [...products].sort((a, b) => {
  switch(order) {
    case 0:
      // 字符串用localeCompare方法比较，第二个参数指定中文按拼音排序，不需要可删除
      return b.product_name.localeCompare(a.product_name, 'zh-CN');
    case 1:
      // 数值类型直接用减法，当前为降序，要升序改为 a.price - b.price
      return b.price - a.price;
    case 2:
      return b.amount - a.amount;
    default:
      return b.store_name.localeCompare(a.store_name, 'zh-CN');
  }
})

const items = [];
// 分页逻辑保持不变
for (let i = pageNo * pagination; i < sortedProducts.length; i++) {
  // 你的表格行生成逻辑
}

return items;

额外注意 #

• 如果products存在React state中，排序完成后需要调用对应的setState方法更新状态，才能触发表格重渲染
• 如果需要支持升序降序切换，只要新增一个排序方向变量，最终返回的比较结果乘以方向值即可（升序为1，降序为-1）

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