在 React 中过滤/映射 JSON 到产品

Question

我有这个 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"
  }
]

拥有此文件后，我尝试对其进行映射并按其内部的类别对其进行过滤，问题是当我想为每个网格创建标题时，我只会为我映射的每个组件重复标题我没有实现我的目标，有人可以解释一下这个事实吗？

更新！现在开始工作！

  const categories = [...new Set(products.map((category) => category.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>;

Answer 1

首先，您应该获取需要显示的类别数组。然后基于这个类别数组，我们可以显示数据。所以可以是这样的：

// import React from "react";

const data = [
  {
    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",
  },
];    

const Catalog = () => {
  const categories = [...new Set(data.map((item) => item.categoria))];
console.log(`categories`, categories);

  const renderCategory = (category) => {
    return (
      <div
        key={category}
        style={{ border: "3px solid black", margin: "5px", padding: "5px" }}
      >
        <h2>Categoria: {category}</h2>
        <div>
          {data
            .filter((item) => item.categoria === category)
            .map(({ id, nombre, precio }) => {
              return (
                <div
                  key={id}
                  style={{
                    border: "1px solid black",
                    margin: "3px",
                    padding: "3px",
                  }}
                >
                  <div>Nombre: {nombre}</div>
                  <div>Precio: {precio}</div>
                </div>
              );
            })}
        </div>
      </div>
    );
  };

  return <div>{categories.map(renderCategory)}</div>;
};

// export default Catalog;

ReactDOM.render(<Catalog />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

const groupedItem = items.reduce((acc, curr) => {
    if(!acc[curr.categoria]) {
      acc[curr.categoria] = []
    }
    acc[curr.categoria].push(curr);
    return acc;
  }, {})

  return (
    <div>
      {Object.keys(groupedItem).map((k) => {
        return (
          <div key={k}>
            <h4>{k}</h4>
            <div>
              {groupedItem[k].map((item) => (
                <div key={item.id}>
                  <div>{item.descripcion}</div>
                  <div>{item.precio}</div>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );