React中如何按首字母分组设计师名称并实现展示？

需求 #

从包含完整产品数据的JSON文件出发，需要将设计师名称按**首字母（字母顺序）**分组嵌套到对象中，最终实现类似以下的展示效果：

D
  Dakine, Dior
G
  Gucci
H
  Hermes

现有代码 #

当前编写的代码如下：

const designerName = designerArray
  .filter(
    (designer, id, designerArray) => designerArray.indexOf(designer) === id
  )
  .sort((a, b) => a.localeCompare(b, "fr"));

const letters = designerArray
  .map((name) => name[0])
  .filter((name, id, designerArray) => designerArray.indexOf(name[0]) === id)
  .sort((a, b) => a.localeCompare(b, "fr"));

const obj = {};

letters.forEach((element, index) => {
  obj[element] = designerName[index];
});

预期输出 #

期望的结构（HTML或文本形式）：

<h3>D</h3>
<ul>
    <li>Dakine</li>
    <li>Dior</li>
</ul>
<h3>G</h3>
<ul>
    <li>Gucci</li>
</ul>
<h3>H</h3>
<ul>
    <li>Hermes</li>
</ul>

或者文本形式：

D
  Dakine
  Dior
G
  Gucci
H
  Hermes

补充数据 #

使用的designerArray结果：

['Hermes', 'Dakine', 'Dior', 'Hermes', 'Gucci']

完整的JSON产品数据：

[
  {
    "product-name": "Jacket",
    "designer": "Hermes",
    "sizes": ["sm", "md", "lg", "xl"],
    "color": ["black", "green"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  },
  {
    "product-name": "Jacket2",
    "designer": "Dakine",
    "sizes": ["sm", "md", "lg", "xl"],
    "color": ["black", "green"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  },
  {
    "product-name": "Sweater",
    "designer": "Dior",
    "sizes": ["sm", "md", "lg", "xl"],
    "color": ["green"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  },
  {
    "product-name": "Shirt",
    "designer": "Hermes",
    "sizes": ["sm", "md", "xl"],
    "color": ["white"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  },
  {
    "product-name": "Pants",
    "designer": "Gucci",
    "sizes": ["sm", "md", "lg"],
    "color": ["black"],
    "description": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Beatae ullam, saepe explicabo eum vel molestiae veritatis omnis, natus a deleniti, iure eligendi quam quisquam maiores repellendus aspernatur atque fuga consectetur.",
    "price": "$532"
  }
]

问题分析 #

现有代码存在两个核心问题：

1. 首字母筛选逻辑错误：letters的filter回调里错误使用了designerArray.indexOf(name[0])，这里的name已经是首字母，再取name[0]会导致无法正确去重首字母。
2. 分组逻辑错误：letters.forEach中直接将designerName[index]赋值给obj[element]，导致每个首字母只对应一个设计师，而非同首字母的所有设计师集合。

修正后的代码 #

以下是实现需求的完整代码：

// 1. 提取设计师名称，去重并排序
const uniqueDesigners = [...new Set(designerArray)].sort((a, b) => a.localeCompare(b, "fr"));

// 2. 按首字母分组设计师
const groupedDesigners = {};
uniqueDesigners.forEach(designer => {
  const firstLetter = designer[0];
  // 初始化首字母对应的数组，或添加设计师到已有数组
  groupedDesigners[firstLetter] = groupedDesigners[firstLetter] || [];
  groupedDesigners[firstLetter].push(designer);
});

// 3. 获取排序后的首字母列表
const sortedLetters = Object.keys(groupedDesigners).sort((a, b) => a.localeCompare(b, "fr"));

// 4. 文本形式输出示例
sortedLetters.forEach(letter => {
  console.log(letter);
  groupedDesigners[letter].forEach(designer => {
    console.log(`  ${designer}`);
  });
});

// 5. HTML结构生成示例（可直接渲染到页面）
let html = '';
sortedLetters.forEach(letter => {
  html += `<h3>${letter}</h3>`;
  html += '<ul>';
  groupedDesigners[letter].forEach(designer => {
    html += `<li>${designer}</li>`;
  });
  html += '</ul>';
});
// 插入到页面容器
// document.getElementById('designer-list').innerHTML = html;

代码说明 #

• 使用[...new Set(designerArray)]替代原filter去重，更简洁高效。
• 遍历去重后的设计师列表，按首字母将设计师归类到对应数组，实现正确分组。
• 通过Object.keys(groupedDesigners).sort()获取排序后的首字母列表，保证展示顺序符合要求。
• 提供文本输出和HTML输出两种示例，可根据实际场景选择使用。

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