React：如何使用.map实现按分类分组的项目列表渲染

问题根源 #

你现有代码的分组逻辑判断条件错误，使用了每条数据的唯一id作为分组匹配依据，导致每条数据都会生成独立的分类分组，因此每条数据都会单独携带分类标题输出。

调整方法 #

仅需要修改数据分组逻辑的匹配规则，改为按Category字段作为分组依据即可，修改后的数据处理代码如下：

const sorterAR = [];
myArray.forEach((item) => {
  // 改为按Category字段匹配分类，而非按子项id匹配
  let cat = sorterAR.find(
    (cat) => cat.Category === item.Category
  );
  if (!cat) {
    cat = {
      // 分类的id直接用Category值保证唯一即可
      id: item.Category,
      Category: item.Category,
      items: [],
    };
    sorterAR.push(cat);
  }
  cat.items.push(item);
});

渲染代码本身逻辑无需调整，补充React要求的key属性避免运行警告即可，优化后参考：

<div className="App">
  {sorterAR.map((cat) => (
    <div key={cat.id}>
      <div>
        <b>{cat.Category}</b>
      </div>
      <ul>
        {cat.items.map((item) => (
          <li key={item.id}>{item.Name}</li>
        ))}
      </ul>
    </div>
  ))}
</div>

修改后就会按照分类字段把同分类的所有数据汇总到同一个分组下，渲染时每个分类只会出现一次标题，下方集中展示该分类下所有项目。

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