如何修改React排序逻辑将值转小写实现不区分大小写排序？

排序错位的根本原因 #

原逻辑直接使用JS原生规则对属性值做大小比较，而JS字符串比较是基于Unicode码位实现的：同一英文字符的大写形式码位整体低于对应小写形式，混排时就会出现大写开头的字符串统一排在小写开头字符串前面的错位结果，完全不符合日常按字典序排序的预期。

调整核心思路 #

不改动原有排序的整体流程，只在执行大小判断之前，把两个待比较的属性值统一做大小写归一化处理，基于转换后的值做比较即可。

具体修改细节 #

• 比较前先对属性值做空值兜底，统一转成字符串格式再转小写，避免值为数字、null、undefined时直接调用toLowerCase方法抛出类型错误
• 所有大小判断都基于归一化后的小写值执行，不再直接引用原始属性值比较

修改后完整代码 #

const [data, setData] = useState<any[]>([]);
const sortCallback = (prop: string, direction: string) => (
    a: object,
    b: object
  ) => {
    // 新增归一化处理：转字符串、空值兜底、统一转小写
    const valA = String(a[prop] ?? '').toLowerCase();
    const valB = String(b[prop] ?? '').toLowerCase();
  
    if (valA < valB) {
      return direction === "asc" ? -1 : 1;
    }

    if (valA > valB) {
      return direction === "asc" ? 1 : -1;
    }

    return 0;
  };

  const sortData = (prop: string, direction: string) => {
    setData((data) => [...data].sort(sortCallback(prop, direction)));

    directionRef.current = {
      ...initDirection,
      [prop]: direction === "desc" ? "asc" : "desc",
    };
    activeRef.current = prop;
  };

  return { sortCallback, sortData, data, setData };
};

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