React项目使用tiny-pinyin实现中文拼音排序失败求助

现有实现的问题与规范性判断 #

你的实现存在两处核心不规范点，也是导致排序看似无效的关键原因：

1. 直接修改Redux原状态：在map中直接给state.apps[key]添加pinyinName属性，违反了Redux状态不可变的原则。这种突变可能导致状态更新异常，甚至让React无法正确触发渲染，看似排序没生效。
2. 分组逻辑与排序逻辑脱节：排序后用原中文名称的字符码分组，而非拼音首字母。比如按拼音排到"A"组的中文应用，原名称的charCode不在A-Z范围内，会被归入allApps[0]，视觉上呈现出排序无效的假象。

除此之外，单独测试拼音转换正常，排序代码本身逻辑没有问题，但上述两个问题掩盖了排序的结果。

最优实现方案 #

方案1：修正tiny-pinyin实现（兼容旧环境） #

如果需要兼容对中文locale支持不佳的环境，继续使用tiny-pinyin，但修正不可变性和分组逻辑：

const start = useSelector((state) => {
  const arr = { ...state.startmenu }; // 拷贝原startmenu状态，不直接修改
  const ln = (6 - (arr.pnApps.length % 6)) % 6;
  
  // 处理pnApps补空（拷贝数组避免修改原state）
  arr.pnApps = [...arr.pnApps];
  for (let i = 0; i < ln; i++) {
    arr.pnApps.push({ empty: true });
  }
  
  // 处理rcApps（返回新对象，不修改原item）
  arr.rcApps = arr.rcApps.map(item => {
    let lastUsed = item.lastUsed;
    if (lastUsed < 0) {
      lastUsed = "Recently Added";
    } else if (lastUsed < 10) {
      lastUsed = "Just Now";
    } else if (lastUsed < 60) {
      lastUsed += "m ago";
    } else if (lastUsed < 360) {
      lastUsed = Math.floor(lastUsed / 60) + "h ago";
    }
    return { ...item, lastUsed };
  });
  
  // 处理应用列表：创建新对象，不修改原state中的app
  const tmpApps = Object.keys(state.apps)
    .filter(x => x !== "hz")
    .map(key => {
      const app = state.apps[key];
      return {
        ...app,
        pinyinName: pinyin.convertToPinyin(app.name, '', false)
      };
    });
  
  // 拼音排序
  tmpApps.sort((a, b) => a.pinyinName.localeCompare(b.pinyinName));
  
  // 按拼音首字母分组
  const allApps = Array.from({ length: 27 }, () => []);
  tmpApps.forEach(app => {
    const firstPinyinChar = app.pinyinName.charAt(0).toUpperCase();
    const charCode = firstPinyinChar.charCodeAt(0);
    if (charCode >= 65 && charCode <= 90) {
      allApps[charCode - 64].push(app);
    } else {
      allApps[0].push(app);
    }
  });
  
  arr.contApps = allApps;
  arr.allApps = tmpApps;
  return arr;
});

方案2：原生localeCompare实现（简洁无依赖） #

现代浏览器和Node.js已支持中文locale排序，无需第三方库，直接用原生API即可实现拼音排序：

const start = useSelector((state) => {
  const arr = { ...state.startmenu };
  const ln = (6 - (arr.pnApps.length % 6)) % 6;
  
  arr.pnApps = [...arr.pnApps];
  for (let i = 0; i < ln; i++) {
    arr.pnApps.push({ empty: true });
  }
  
  arr.rcApps = arr.rcApps.map(item => {
    let lastUsed = item.lastUsed;
    if (lastUsed < 0) {
      lastUsed = "Recently Added";
    } else if (lastUsed < 10) {
      lastUsed = "Just Now";
    } else if (lastUsed < 60) {
      lastUsed += "m ago";
    } else if (lastUsed < 360) {
      lastUsed = Math.floor(lastUsed / 60) + "h ago";
    }
    return { ...item, lastUsed };
  });
  
  const tmpApps = Object.keys(state.apps)
    .filter(x => x !== "hz")
    .map(key => ({ ...state.apps[key] })); // 创建新对象
  
  // 直接用中文locale排序
  tmpApps.sort((a, b) => a.name.localeCompare(b.name, 'zh-CN', { sensitivity: 'base' }));
  
  // 按拼音首字母分组
  const allApps = Array.from({ length: 27 }, () => []);
  tmpApps.forEach(app => {
    const firstChar = app.name.trim().charAt(0);
    if (/^[A-Za-z]$/.test(firstChar)) {
      const upperChar = firstChar.toUpperCase();
      allApps[upperChar.charCodeAt(0) - 64].push(app);
    } else {
      // 提取中文首字母进行分组
      const pinyinFirst = pinyin.convertToPinyin(firstChar, '', false).charAt(0).toUpperCase();
      const charCode = pinyinFirst.charCodeAt(0);
      if (charCode >=65 && charCode <=90) {
        allApps[charCode -64].push(app);
      } else {
        allApps[0].push(app);
      }
    }
  });
  
  arr.contApps = allApps;
  arr.allApps = tmpApps;
  return arr;
});

关键注意事项 #

• 始终遵守Redux状态不可变原则：所有状态更新都要返回新对象/数组，避免直接修改原state。
• 排序与分组逻辑要统一：如果按拼音排序，分组也必须基于拼音首字母，否则会出现排序后分组混乱的情况。

内容的提问来源于stack exchange，提问作者冬天冬天W