如何根据复选框选择呈现列表? [英] How to render a list according to the checkbox selection?

问题描述

我有一个呈现一些产品的列表，这些产品分为一些类别.

我正在尝试通过复选框应用具有这些类别的过滤器.当用户选中复选框时，必须使用所选类别更新列表.

我想知道如何根据复选框选择呈现产品列表?

我将我的代码放入

在这里我呈现我的产品列表:

import React, { useState, useMemo, useEffect } from "react";import { useSelector } from "react-redux";从 "../CardItem" 导入 CardItem；从../Pagination"导入分页；从../Search"导入搜索；import { useStyles } from "./styles";const Card = (props) =>{const { activeFilter } = props;const 类 = useStyles();const data = useSelector((state) => state.perfume.collections);const [searchPerfume, setSearchPerfume] = useState("");const [currentPage, setCurrentPage] = useState(1);const [perfumesPerPage, setPerfumesPerPage] = useState(3);console.log("activeFilter: ", activeFilter);const orderList = 数据.map((项目) => ({...物品，totalSize: item.sizes.reduce((sum, cur) => sum + cur.price, 0)})).sort((a, b) => a.totalSize - b.totalSize);constfilteredPerfumes = useMemo(() => {返回 orderList.filter((香水) =>香水名.toLowerCase().includes(searchPerfume.toLowerCase()));}, [orderList, searchPerfume]);const currentPerfumes = 过滤香水.slice((currentPage - 1) * 香水每页，当前页 * 香水每页);const pages = Math.ceil(filteredPerfumes.length/香水PerPage);useEffect(() => {if (currentPage > pages) {设置当前页面(1)；}}, [currentPage, pages]);const pageNumbers = Array(pages).填充(空).map((val, index) => index + 1);const handleClick = (page) =>{设置当前页面(页面)；};返回 (<div><搜索数据测试ID =输入过滤器ID"setSearchPerfume={setSearchPerfume}/>{当前香水.filter((香水) => {返回 (香水名.toLowerCase().indexOf(searchPerfume.toLowerCase()) >= 0);}).map((项目) => (<CardItem key={item.id} item={item}/>))}<分页页码={页码}handleClick={handleClick}当前页={当前页}/>

);};导出默认卡；

提前致谢.

解决方案

试试那个

 constfilteredPerfumes = useMemo(() => {const 过滤 = orderList.filter((香水) =>香水名.toLowerCase().includes(searchPerfume.toLowerCase()));如果(activeFilter.length > 0){返回filtered.filter((item) => item.categories.some((a) =>activeFilter.some((v) => v.text === a)));}返回过滤；}, [orderList, searchPerfume]);

I have a list that renders some products, these products are divided into some categories.

I am trying to apply a filter with these categories through checkboxes. When the user selects the checkbox, the list must be updated with the selected category.

I would like to know how to render a list of products according to the checkbox selection?

I put my code into codesandbox because has a lot of files.

For example, here I would like to render only products from the Chypre and Floriental categories.

Here I render my list of products:

import React, { useState, useMemo, useEffect } from "react";
import { useSelector } from "react-redux";

import CardItem from "../CardItem";
import Pagination from "../Pagination";
import Search from "../Search";
import { useStyles } from "./styles";

const Card = (props) => {
  const { activeFilter } = props;
  const classes = useStyles();
  const data = useSelector((state) => state.perfume.collections);
  const [searchPerfume, setSearchPerfume] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
  const [perfumesPerPage, setPerfumesPerPage] = useState(3);

  console.log("activeFilter: ", activeFilter);

  const orderList = data
    .map((item) => ({
      ...item,
      totalSize: item.sizes.reduce((sum, cur) => sum + cur.price, 0)
    }))
    .sort((a, b) => a.totalSize - b.totalSize);

  const filteredPerfumes = useMemo(() => {
    return orderList.filter((perfume) =>
      perfume.name.toLowerCase().includes(searchPerfume.toLowerCase())
    );
  }, [orderList, searchPerfume]);

  const currentPerfumes = filteredPerfumes.slice(
    (currentPage - 1) * perfumesPerPage,
    currentPage * perfumesPerPage
  );
  const pages = Math.ceil(filteredPerfumes.length / perfumesPerPage);

  useEffect(() => {
    if (currentPage > pages) {
      setCurrentPage(1);
    }
  }, [currentPage, pages]);

  const pageNumbers = Array(pages)
    .fill(null)
    .map((val, index) => index + 1);

  const handleClick = (page) => {
    setCurrentPage(page);
  };

  return (
    <div>
      <Search
        data-testid="input-filter-id"
        setSearchPerfume={setSearchPerfume}
      />
      {currentPerfumes
        .filter((perfume) => {
          return (
            perfume.name.toLowerCase().indexOf(searchPerfume.toLowerCase()) >= 0
          );
        })
        .map((item) => (
          <CardItem key={item.id} item={item} />
        ))}
      <Pagination
        pageNumbers={pageNumbers}
        handleClick={handleClick}
        currentPage={currentPage}
      />
    </div>
  );
};

export default Card;

Thank you in advance.

解决方案

Try that one

 const filteredPerfumes = useMemo(() => {
    const filtered = orderList.filter((perfume) =>
      perfume.name.toLowerCase().includes(searchPerfume.toLowerCase())
    );

    if (activeFilter.length > 0) {
      return filtered.filter((item) => item.categories.some((a) =>
        activeFilter.some((v) => v.text === a)
      ));
    }
    return filtered;
  }, [orderList, searchPerfume]);

这篇关于如何根据复选框选择呈现列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！