在 React 中单击按钮时如何过滤产品答案

【问题标题】：how to filter products when button is clicked in React在 React 中单击按钮时如何过滤产品
【发布时间】：2021-11-14 23:24:54
【问题描述】：

我有从 API 获取的产品。我想做的是根据按钮过滤这些产品。所以这是我的代码：

import React, { useEffect, useState } from "react";
import Product from "../components/sub-components/Product";
import LoadingBox from "../components/sub-components/LoadingBox";
import MessageBox from "../components/sub-components/MessageBox";
import { useDispatch, useSelector } from "react-redux";
import { listProducts } from "../actions/productActions";
import ReactPaginate from "react-paginate";

export default function HomeScreen() {
  const dispatch = useDispatch();
  const productList = useSelector((state) => state.productList);
  const { loading, error, products } = productList;
  const [currentPage, setCurrentPage] = useState(1);
  const [pageCount, setpageCount] = useState(0);

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

  const handlePageClick = (data) => {
    setCurrentPage(data.selected + 1);
    // scroll to the top
    window.scrollTo(0, 0)
  };

  const [ mugSelected, setMugSelected ] = useState(false);
  const [ shirtSelected, setShirtSelected ] = useState(false);

  const handleMugToggle = () => {
    setMugSelected(!mugSelected);
  };
  const handleShirtToggle = () => {
    setShirtSelected(!shirtSelected);
  };
  return (
    <div className="container">
      <div className="row">
        <div className="col-lg-6 col-md-12 col-sm-12 col-xs-12">
          <h2 className="title">Products</h2>
          <div className="product-type-filter">
            <button className={mugSelected ? "clicked" : null} onClick={handleMugToggle}>Mug</button>
            <button className={shirtSelected ? "clicked" : null} onClick={handleShirtToggle}>Shirt</button>
          </div>
          <div className="products">
            <div className="row">
              <div>
                {loading ? (
                  <LoadingBox></LoadingBox>
                ) : error ? (
                  <MessageBox variant="danger">{error}</MessageBox>
                ) : (
                  <div className="row center">
                    {products.map((product) => (
                      <Product key={product.added} product={product}></Product>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
          <ReactPaginate
            previousLabel={"Prev"}
            nextLabel={"Next"}
            pageCount={40}
            marginPagesDisplayed={4}
            pageRangeDisplayed={1}
            onPageChange={handlePageClick}
            containerClassName={"pagination justify-content-center"}
            pageClassName={"page-item"}
            pageLinkClassName={"page-link"}
            previousClassName={"page-item"}
            previousLinkClassName={"page-link"}
            nextClassName={"page-item"}
            nextLinkClassName={"page-link"}
            breakClassName={"page-item"}
            breakLinkClassName={"page-link"}
            activeClassName={"active"}
          />
        </div>
      </div>
    </div>
  );
}

所以我有两个按钮的杯子和衬衫，当杯子点击时，我想显示所有“类型”为杯子的产品。你能帮我解决这个问题吗？我也可以分享我的产品操作。我的数据来自 api：

{
    "tags": [
      "Trees"
    ],
    "price": 10.99,
    "name": "Handcrafted Trees Mug",
    "description": "enim corporis voluptatibus laudantium possimus alias dolorem voluptatem similique aut aliquam voluptatem voluptatem omnis id consequatur",
    "slug": "Handcrafted-Trees-Mug",
    "added": 1485723766805,
    "manufacturer": "OHara-Group",
    "itemType": "mug"
  },
  {
    "tags": [
      "Beach",
      "Ocean",
      "Water"
    ],
    "price": 19.99,
    "name": "Rustic Beach Mug",
    "description": "totam at veritatis eligendi assumenda ex quia praesentium quibusdam ducimus",
    "slug": "Rustic-Beach-Mug",
    "added": 1481573896833,
    "manufacturer": "Sipes-Inc",
    "itemType": "mug"
  },

所以我在 React 方面没有很多经验，尤其是在过滤方面，如果你能帮助我，我会很高兴。谢谢...

【问题讨论】：

请分享您到现在为止的尝试
您的切换逻辑有效吗？例如，当您切换杯子状态时，您是否也需要切换衬衫状态？还是可以同时选择杯子和衬衫？
是的，我的切换器正在工作，并且它们单独工作。因此，例如，如果两者都被选中，则需要显示所有产品。

标签： reactjs filter react-redux filtering react-component

【解决方案1】：

试试这个...

添加此效果以在每次渲染时过滤列表

 const [selectedProducts, setSelectedProducts] = useState([]);

   useEffect(()=>{
       const filteredList = products.filter(prod=> 
           mugSelected && prod.itemType=="mug" || 
           shirtSelected && prod.itemType=="shirt" );
       setSelectedProducts(filteredList);
   },[products, mugSelected, shirtSelected])

然后，在渲染部分

<div className="row center">
    {selectedProducts.map((product) => (
        <Product key={product.added} product={product}/>
    ))}
</div>

【讨论】：