如何创建一个在react上使用复选框过滤产品的函数

Question

我正在写一个在线商店，我需要这样的过滤

示例照片

我是这样开始的，因为我以前没有这样做过，在网上也找不到教程，所以我决定问你。(互联网上有几个选项，但他们有不同的方法(

export default function Search() {
const theme = useTheme()
const isTablet = useMediaQuery(theme.breakpoints.down('md'))
const ref = React.useRef(null)
let [searchParams, setSearchParams] = useSearchParams()
const filters = React.useMemo(() => {
let obj = {
page: searchParams.get('page') || 0,
size: searchParams.get('size') || 16,
query: searchParams.get('query'),
category: searchParams.get('category'),
brand: searchParams.get('brand'),
promo: searchParams.get('promo'),
min: searchParams.get('min') || 0,
max: searchParams.get('max') || 10000000,
sorted: searchParams.get('sorted'),
state: searchParams.get('state'),
}
console.log(obj);
for (const [key, value] of Object.entries(obj)) {
if (value === null || value === undefined) delete obj[key]
}
return obj
}, [searchParams])
const updateFilter = (key, value) => {
if (value) searchParams.set(key, value)
else searchParams.delete(key)
setSearchParams(searchParams)
}
const { data } = useSearchProductsQuery(filters)
// number | next (data?.number + 1) | previous (data?.number - 1)
const setPage = page => updateFilter('page', page)
const setSize = size => updateFilter('size', size)
const setQuery = () => updateFilter('query', ref?.current?.value)
// category id | null for default
const setCategory = category => updateFilter('category', category)
// brand id | null for default
const setBrand = brand => updateFilter('brand', brand)
// promo id | null for default
const setPromo = promo => updateFilter('promo', promo)
// number (0+) | null for default
const setMin = min => updateFilter('min', min)
// number | null for default
const setMax = max => updateFilter('max', max)
// price_asc | price_desc | date_asc | date_desc | null for default
const setSorted = sorted => updateFilter('sorted', sorted)
// Б/У | Хорошее | Новое, с биркой | null for default
const setState = state => updateFilter('state', state)
return (
<Container className="py-4">
<div className="mb-4 flex flex-col-reverse sm:grid sm:grid-cols-[2fr_1fr] sm:gap-4">
<h6 className="h-full py-2">
{filters.query &&
`По запросу "${filters.query}" найдено ${
data?.totalElements ?? 0
} результата.`}
</h6>
<div className="input-group sm:relative flex flex-row items-stretch w-full border rounded-md">
<input
ref={ref}
type="search"
onChange={e => !e.target.value && setQuery()}
onKeyPress={e => e.key === 'Enter' && setQuery()}
className="relative flex-auto min-w-0 block w-full pl-4 pr-1 py-2 text-base font-normal text-gray-700 bg-white bg-clip-padding  rounded transition ease-in-out m-0 outline-none border-0"
placeholder="Поиск по названию..."
/>
<span className="input-group-text flex items-center pr-2 py-2 text-base font-normal text-gray-700 text-center whitespace-nowrap rounded">
<Magnifier
onClick={setQuery}
className="h-5 stroke-zinc-300 hover:stroke-slate-900 cursor-pointer"
/>
</span>
</div>
</div>
<div style={{ margin: '10px 0' }}>
{isTablet ? <SearchFilter /> : null}
</div>
<div className="w-full block sm:grid grid-cols-[1fr_3fr] gap-x-4 xl:gap-x-8">
<div className="hidden rounded-md border p-4 sm:block ">
<div>{isTablet ? null : <SearchFilterSideBar />} </div>
</div>
<div className="grid grid-cols-2 gap-y-5 gap-x-2 sm:gap-y-10 sm:gap-x-4 lg:grid-cols-3 xl:grid-cols-4">
{React.Children.toArray(
data?.content.map(product => <ProductCard product={product} />),
)}
</div>
</div>
</Container>
)
}

这是我的产品阵列，我用api 从后端获得它们

0:{ {id: 382, title: "Платье с поясом",…}
brand: 20
cartQuantity: 1
category: 131
createdDate: "2022-05-04T21:59:06.836+00:00"
description: "Короткое платье из хлопковой ткани с круглой горловиной и глубоким вырезом спереди с потайной застежкой на крючок и пуговицу сверху. Плавно заниженная линия плеча длинный широкий рукав с узким манжетом на пуговице отрезная талия с длинным завязывающимся поясом а также летящая юбка клеш."
id: 382
pictures: ["https://beta.thebrands.vip/api/v1/pictures/img_8fbbd6ba16c84256b32538859c7d8a95.jpg",…]
remainingEditTime: -6358440
sizes: [,…]
0: {id: 390, productId: 382, sizeId: 388, sizeLabel: "37", sizeTypeLabel: "Европеский", priceId: 389,…}
discount: 71
id: 390
price: 100
priceId: 389
productId: 382
sizeId: 388
sizeLabel: "37"
sizeTypeLabel: "Европеский"
status: "APPROVED"
title: "Платье с поясом"
user: 6}

UI文件筛选。我在材料Ui 中得到这个

const SearchFilterSideBar = () => {
const [value, setValue] = React.useState([100, 37]);
const theme = useTheme();
const [color,setColor] = useState('black')
const isSmall = useMediaQuery(theme.breakpoints.down("sm"));
const handleChange = (event, newValue) => {
setValue(newValue);
};


return (

<Box
sx={{ width:'280px', padding:'20px 10px 10px 10px' }}
>
<Typography align="center" variant="h5" marginTop="50px" color="black">
Price
</Typography>
<Box
sx={{
padding: "10px 20px 0px 20px",
display: "flex",
flexDirection: "row",
justifyContent: "center",
}}
>
<Slider
getAriaLabel={() => 'Price range'}
value={value}
onChange={handleChange}
valueLabelDisplay="auto"
min={10}
max={500}

/>
</Box>
<Box
sx={{
padding: "0px 20px",
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
}}
>
<h5>10$</h5>
<h5>500$</h5>
</Box>
<List>
<Typography align="center" variant="h5" color="black" sx={{ paddingTop: (theme) => theme.spacing(3) }}>
Категория
</Typography>
{['Для него', 'Для нее', 'Для детей'].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton>
<FormGroup>
<FormControlLabel control={<Checkbox defaultChecked />} />
</FormGroup>
<ListItemText primary={text} />
</ListItemButton>
</ListItem>
))}
</List>
<Divider />
<List>
<Typography align="center" variant="h5" color="black" sx={{ paddingTop: (theme) => theme.spacing(3) }}>
Бренд
</Typography>
{['Lacoste', 'Bigser', 'Guggi','Nike'].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton>
<FormGroup>
<FormControlLabel control={<Checkbox defaultChecked />} />
</FormGroup>

<ListItemText primary={text} />
</ListItemButton>
</ListItem>
))}
</List>
<Divider />
<List>
<Typography align="center" variant="h5" color="black" sx={{ paddingTop: (theme) => theme.spacing(3) }}>
Сортировать по
</Typography>
{['Дате', 'Цене'].map((text, index) => (
<ListItem key={text} disablePadding>
<ListItemButton>
<FormGroup>
<FormControlLabel control={<Checkbox defaultChecked />} />
</FormGroup>
<ListItemText primary={text} />
</ListItemButton>
</ListItem>
))}
</List>

</Box>

)
}
export default SearchFilterSideBar

中级开发人员告诉我使用这些方法。但我不知道下一步该怎么办，如果不难的话，展示几个例子

let [searchParams, setSearchParams] = useSearchParams()
const filters = React.useMemo(() => {
let obj = {
page: searchParams.get('page') || 0,
size: searchParams.get('size') || 16,
query: searchParams.get('query'),
category: searchParams.get('category'),
brand: searchParams.get('brand'),
promo: searchParams.get('promo'),
min: searchParams.get('min') || 0,
max: searchParams.get('max') || 10000000,
sorted: searchParams.get('sorted'),
state: searchParams.get('state'),
}
console.log(obj);
for (const [key, value] of Object.entries(obj)) {
if (value === null || value === undefined) delete obj[key]
}
return obj
}, [searchParams])
const updateFilter = (key, value) => {
if (value) searchParams.set(key, value)
else searchParams.delete(key)
setSearchParams(searchParams)
}
const { data } = useSearchProductsQuery(filters)
// number | next (data?.number + 1) | previous (data?.number - 1)
const setPage = page => updateFilter('page', page)
const setSize = size => updateFilter('size', size)
const setQuery = () => updateFilter('query', ref?.current?.value)
// category id | null for default
const setCategory = category => updateFilter('category', category)
// brand id | null for default
const setBrand = brand => updateFilter('brand', brand)
// promo id | null for default
const setPromo = promo => updateFilter('promo', promo)
// number (0+) | null for default
const setMin = min => updateFilter('min', min)
// number | null for default
const setMax = max => updateFilter('max', max)
// price_asc | price_desc | date_asc | date_desc | null for default
const setSorted = sorted => updateFilter('sorted', sorted)
// Б/У | Хорошее | Новое, с биркой | null for default
const setState = state => updateFilter('state', state)

Answer 1

在映射-data.content.map的地方，可以在那里过滤项目。

代码很难阅读，因此我只想创建一个过滤的函数

const filteredItems = (itemList, filters) => {
// filter can be one or multiple say arrays - for simplicity here is with one
return itemList.filter(item => condition)
}

然后传入带有参数的数据内容，获得过滤结果并通过它们进行映射