按类别过滤反应和 bootstrap

Question

我正在建立一个电子商务网站，我正在尝试在主页上添加类别按钮，这样当您单击特定类别时，只会显示那些项目。我正在使用 redux 将所有项目带到主屏幕。

const products = [
  {
    name: 'Airpods Wireless Bluetooth Headphones',
    image: '/images/airpods.jpg',
    description:
      'Bluetooth technology lets you connect it with compatible devices wirelessly High-quality AAC audio offers immersive listening experience Built-in microphone allows you to take calls while working',
    brand: 'Apple',
    category: 'Headphones',
    price: 89.99,
    countInStock: 10,
    rating: 4.5,
    numReviews: 12,
  },

项目结构如下所示。

这是我在 HomeScreen 组件上的代码：

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Row, Col, Button, ButtonGroup } from 'react-bootstrap';
import Product from '../components/Product';
import Loader from '../components/Loader';
import Message from '../components/Message';
import { listProducts } from '../actions/productActions';

const HomeScreen = () => {
  const dispatch = useDispatch();

  const productList = useSelector(state => state.productList);
  const { loading, error, products } = productList;

  const allCategories = [
    'All',
    ...new Set(products.map(product => product.category)),
  ];
  console.log(allCategories);

  useEffect(() => {
    dispatch(listProducts());
  }, [dispatch]);

  return (
    <>
      <div className="text-center my-4">
        <ButtonGroup>
          <Button className="btn-color-primary" style={{ margin: '5px' }}>
            All
          </Button>
          <Button className="btn-color-primary" style={{ margin: '5px' }}>
            Phones
          </Button>
          <Button className="btn-color-primary" style={{ margin: '5px' }}>
            Headphones
          </Button>
          <Button className="btn-color-primary" style={{ margin: '5px' }}>
            Cameras
          </Button>
          <Button className="btn-color-primary" style={{ margin: '5px' }}>
            Cameras
          </Button>
          <Button className="btn-color-primary" style={{ margin: '5px' }}>
            PlayStation
          </Button>
        </ButtonGroup>
      </div>
      {loading ? (
        <Loader />
      ) : error ? (
        <Message variant="danger">{error}</Message>
      ) : (
        <Row>
          {products.map(product => (
            <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
              <Product product={product} />
            </Col>
          ))}
        </Row>
      )}
    </>
  );
};

export default HomeScreen;

我创建了一个变量，其中映射了产品的所有类别以及 'All' one.What 我应该添加到按钮以便当我点击它们时它会按需要工作吗？

Answer 1

您可以创建一个具有所选类别名称的状态变量。在呈现产品之前，过滤类别为所选类别的产品。

const [selectedCategory, setSelectedCategory] = useState("All");
const handleClick = (category) => setSelectedCategory(category);

现在，对于按钮，您应该添加一个 onClick 事件侦听器，它会在单击时更改 selectedCategory。例如

<ButtonGroup>
    {
     allCategories.map(category => (
        <Button onClick={() => handleClick(category)} key={category} className="btn-color-primary" style={{ margin: '5px' }}>
            {category}
        </Button>)
    }
 </ButtonGroup>

现在，如果 selectedCategory 不是“全部”，则过滤产品

products.filter(product => selectedCategory==="All" || product.category===selectedCategory)
    .map(product => (
        <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
            <Product product={product} />
        </Col>))

Answer 2

这是你的数据 -

 const products = [
  {
    name: 'Airpods Wireless Bluetooth Headphones',
    image: '/images/airpods.jpg',
    description:
      'Bluetooth technology lets you connect it with compatible devices wirelessly High-quality AAC audio offers immersive listening experience Built-in microphone allows you to take calls while working',
    brand: 'Apple',
    category: 'Headphones',
    price: 89.99,
    countInStock: 10,
    rating: 4.5,
    numReviews: 12,
  },......

现在我们可以对过滤器执行此操作，只需更改 wantedCategory（将其用作状态）

const wantedCategory = "Headphones"
const filteredProducts = products.filter(p => p.category === wantedCategory)

然后您可以映射数组以仅显示过滤后的项目

<Row>
  {filteredProducts.map(product => (
    <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
       <Product product={product} />
    </Col>
  ))}
</Row>

按类别过滤反应和 bootstrap

Filtering by categories react and bootstrap

categories

reactjs

react-bootstrap

redux