如何在 React 中创建 'All' 过滤按钮来过滤我的产品？

Question

如何创建 'All' 过滤按钮来过滤我的产品？如您所见，我有每个类别的过滤器按钮，但似乎对 'all' 没有任何作用。我认为这是我错过但无法解决的简单问题。我是编码新手，所以目前它是一个学习曲线，在此先感谢

import React, { useState } from 'react';

const HOME_GARDEN = 'home and garden';
const ART = 'Art';


export default function Shop({ setCart, cart, handleClick }) {
const [products] = useState([
{
    category: ART,
    name: 'Original David Bowie Mug Shot Mixed Media Framed Artwork',
    cost: 200,
    image:'images/bowie.jpeg',
    page:'Bowie',
    description: "Original David Bowie Mug Shot Mixed Media Framed Artwork floral 
painting on wooden canvas with an original pop art style David Bowie Mugshot on top 
painting is framed with a red baroque style frame including the words deadly flowers 
 bloom around frame",

  },

{
    category: HOME_GARDEN,
    name: 'Blanket',
    cost: 19.99,
    image:
    'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSpwdYDmUL_ZEqhLV7ZWRdQAU7DGcGaxtCt7SrTlL9umrQs2Un7rj9Nbb9Vq01RtEfA0eAVmdt-&usqp=CAc',
    page:'Blanket',


    },
  ]);

 const addToCart = (product) => {
let newCart = [...cart];
let itemInCart = newCart.find(
  (item) => product.name === item.name
);
if (itemInCart) {
  itemInCart.quantity++;
} else {
  itemInCart = {
    ...product,
    quantity: 1,
  };
  newCart.push(itemInCart);
}
setCart(newCart);

};

const [category, setCategory] = useState(HOME_GARDEN);

const getProductsInCategory = () => {
return products.filter(
(product) => product.category === category
 );
 };

return ( <>

商店

    <button onClick={(e) => setCategory(ART)}>
      Art</button>
      <button onClick={(e) => setCategory(HOME_GARDEN)}>
        Home and Garden</button>
      <button onClick={(e) => setCategory()}>
          All</button>
  <div className="products">
      {getProductsInCategory().map((product, idx) =>(
        <div className="product" key={idx}>
          <h3>{product.name}</h3>
          <h4>£{product.cost}</h4>
          <img src={product.image} alt={product.name} />
          <br />
          <button onClick={() => addToCart(product)}>
            Add to Cart
          </button>

          <button onClick={() => handleClick(product)}>
              View Product
            </button>
        </div>
    ))}

</>

); }

Answer 1

可能是这样的：

const getProductsInCategory = () => {
    if (category === ALL) {
        return products;
    } else {
        return products.filter((product) => product.category === category);
    }
};

在顶部添加一个 'all' 类别：

const HOME_GARDEN = 'home and garden';
const ART = 'Art'; 
const ALL = 'All';

在您的 'All' 按钮上，使用：

<button onClick={(e) => setCategory(ALL)}>
          All</button>

如何在 React 中创建 'All' 过滤按钮来过滤我的产品？

How do I create a 'All' filter button to filter my products in React?

button

filter

reactjs

商店