React中商品JSON使用Filter/Map按分类分组展示实现方案

原始商品JSON结构 #

可根据需求调整如下商品数据的结构：

[
  {
    "id": 1,
    "nombre": "Tony Hawk Eye of the Hawk",
    "stock": 10,
    "precio": 10300,
    "descripcion": "La tabla \"Eye of the Hawk\" integra los mejores estandares de calidad a la hora de construir una tabla de skate. Hecha de madera de arce resistente, esta tabla cuenta con superficie adherente en la plataforma y ejes de aluminio resistentes. Está decorada con un diseño gráfico de Hawk en la parte inferior.",
    "imagen": "./images/skatetony2.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 2,
    "nombre": "Tony Hawk Diving Hawk",
    "stock": 3,
    "precio": 10300,
    "descripcion": "La tabla \"Diving Hawk\" integra los mejores estandares de calidad a la hora de construir una tabla de skate. Hecha de madera de arce resistente, esta tabla cuenta con superficie adherente en la plataforma y ejes de aluminio resistentes. Está decorada con un diseño gráfico de Hawk en la parte inferior.",
    "imagen": "./images/skatetony.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 3,
    "nombre": "Verb Adam Bergeisha",
    "stock": 6,
    "precio": 10300,
    "descripcion": "Lujosa en diseño, la plataforma de skate modelo profesional \"Verb Adam Bergeisha\" más nueva de Nick Tucker está cubierta con un impresionante gráfico de una geisha en tonos metálicos y pastel.",
    "imagen": "./images/geishaskate.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 4,
    "nombre": "Lizzie Birdhouse Medusa",
    "stock": 3,
    "precio": 10300,
    "descripcion":"Este modelo inspirado en Lizzie Armanto ofrece un diseño duradero de arce hardrock y gráficos dementes de Medusa revisando su teléfono para un aspecto único que te inspirará a llamar a tus amigos para una sesión de patinaje.",
    "imagen": "./images/skatemedusa.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 5,
    "nombre": "Hydroponic Pullet Mike",
    "stock": 2,
    "precio": 10300,
    "descripcion":"Una tabla inspirada para todos los niveles de skaters, desde iniciales hasta pro's, con tapa de arce y un diseño fino, es ideal para probar todas las piruetas que quieras",
    "imagen": "./images/skaterat.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 6,
    "nombre": "Hydroponic Mexican Skull",
    "stock": 6,
    "precio": 10300,
    "descripcion":"Una tabla inspirada en las tipicas calacas mexicanas, con una construccion basada en arce y resina epoxi de 7 capas, es ideal para las piruetas mas extremas que tu mente puede planear",
    "imagen": "./images/skatemex.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 7,
    "nombre": "Birdhouse Chicken",
    "stock": 2,
    "precio": 10300,
    "descripcion":"Una tabla hecha con 7 capas de Hardrock Maple, lo que le aporta una mayor resistencia para poder hacer todos esos trucos que tanto nos gustan! ",
    "imagen": "./images/birdchiken.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 8,
    "nombre": "Heart Supply Peace",
    "stock": 2,
    "precio": 10300,
    "descripcion":"La Heart Supply Peace es una tabla de skateboard de calidad hecha de arce. Gracias a la construcción en arce disfrutarás de un pop excelente. Una base que presenta una forma de pop con doble kick, que te ayuda a conseguir potentes ollies y nollies con confianza.",
    "imagen": "./images/skateheart.jpg",
    "categoria": "tabla de skate"
  },
  {
    "id": 9,
    "nombre": "Vans Old Skool",
    "stock": 2,
    "precio": 15300,
    "imagen": "./images/VansOldSkoolNegras.JPG",
    "categoria": "calzado"
  },
  {
    "id": 10,
    "nombre": "Vans U Authentic",
    "stock": 5,
    "precio": 16300,
    "imagen": "./images/VansUAuthentic.JPG",
    "categoria": "calzado"
  },
  {
    "id": 11,
    "nombre": "Vans Era",
    "stock": 5,
    "precio": 10300,
    "imagen": "./images/VansEra.JPG",
    "categoria": "calzado"
  },
  {
    "id": 12,
    "nombre": "Vans Ultra Range",
    "stock": 5,
    "precio": 10300,
    "imagen": "./images/VansUltraRangeNegras.JPG",
    "categoria": "calzado"
  },
  {
    "id": 13,
    "nombre": "Vans U Sports",
    "stock": 5,
    "precio": 10300,
    "imagen": "./images/VansUSports.JPG",
    "categoria": "calzado"
  }
]

问题说明 #

需要对上述商品数据按categoria字段分类渲染，每个分类下显示对应商品网格，且每个分类仅展示一次标题。最初实现时直接遍历所有商品，导致每渲染一个商品就重复输出一次分类标题，不符合预期。

解决逻辑 #

核心思路是拆分两次遍历：

1. 先从所有商品中提取去重后的分类列表，确保每个分类只出现一次
2. 遍历分类列表，每个分类仅渲染一次标题，再筛选出该分类下的所有商品渲染为网格项

可运行实现代码（React） #

// 提取去重的分类列表
const categories = [...new Set(products.map((item) => item.categoria))]

// 渲染单个分类的方法
const renderCategory = (category) => {
  return (
    <div key={category}>
      <h2>{category}</h2>
      <div className="grillaProductos">
        {/* 筛选当前分类的所有商品并渲染 */}
        {products.filter((product) => product.categoria === category).map(product=>{
          return <Item data={product} key={product.id}/>
        })}
      </div>
    </div>
  );
};

// 整体渲染所有分类
return <div>{categories.map(renderCategory)}</div>;

内容的提问来源于stack exchange，提问作者Martin Omar Heredia