如何使用React将字母映射列表拆分为按首字母排序的多个<ul>

云上老周

2026-9-26

实现步骤

步骤1：对已排序的列表按首字母分组

你的原列表已经按字母排序完成，不需要二次排序，直接遍历分组即可。你可以在组件渲染前处理数据，示例代码如下：

const groupedList = {}
listItem.forEach(item => {
  // 取name的第一个字符作为首字母，统一转大写避免大小写差异
  const firstLetter = item.name[0].toUpperCase()
  // 如果当前首字母还没有分组，就新建空数组
  if (!groupedList[firstLetter]) {
    groupedList[firstLetter] = []
  }
  // 把当前项推入对应首字母的分组
  groupedList[firstLetter].push(item)
})

如果想优化渲染性能，可以把这段逻辑放到useMemo里，依赖项设为listItem，避免每次渲染都重新分组：

import { useMemo } from 'react'

// 在组件内编写
const groupedList = useMemo(() => {
  const result = {}
  listItem.forEach(item => {
    const firstLetter = item.name[0].toUpperCase()
    if (!result[firstLetter]) {
      result[firstLetter] = []
    }
    result[firstLetter].push(item)
  })
  return result
}, [listItem])

步骤2：渲染分组后的列表

替换你原来的ul渲染逻辑，先遍历分组的所有首字母，每个首字母对应一个标题和一个ul：

<div>
  {/* 遍历所有首字母分组 */}
  {Object.entries(groupedList).map(([letter, items]) => (
    <div key={letter}>
      {/* 首字母标题，可自行加样式区分 */}
      <h3>{letter}</h3>
      <ul>
        {/* 渲染当前分组下的所有item */}
        {items.map((item) => (
          <li key={item.id || item.name}> {/* 优先用item的唯一id当key，没有的话用name也比index稳妥 */}
            <a data={item}>
              {item.name}
            </a>
          </li>
        ))}
      </ul>
    </div>
  ))}
</div>