过滤产品取决于用户选择
过滤产品取决于用户选择
提问于 2022-06-21 12:29:10
我得到了产品页面，可以选择按大小\模型\价格和排序进行筛选。
我确实成功地完成了这个工作，但与类似5-6 useEffect，它看起来非常庞大。
我需要一些关于如何使它在没有5-6 useEffects的情况下工作的一些提示，因为我真的很努力，但没有成功。
我正在使用redux工具包。
所以过滤器的值来自于redux商店。
const { size, brand, price, sort } = useSelector((state) => state.filter);来自后端的产品数据
const { loading, error, data } = useQuery(GET_PRODUCTS);我就是这样用这么多的效果.
useEffect(() => {
if (sort.length > 0) {
if (sort.includes('price-highest')) {
setFilteredProducts((filteredList) =>
filteredList.slice().sort((a, b) => b.price - a.price)
);
} else {
setFilteredProducts((filteredList) =>
filteredList.slice().sort((a, b) => a.price - b.price)
);
}
}
}, [data?.getProducts, sort, size, brand, price]);
useEffect(() => {
if (size.length > 0) {
setFilteredProducts((list) =>
list.filter((product) => {
return product.size.includes(Number(...size));
})
);
}
}, [data?.getProducts, data, size, brand, price]);
useEffect(() => {
if (brand.length > 0) {
setFilteredProducts((list) =>
list.filter((product) => {
return product.brand.includes(...brand);
})
);
}
}, [data?.getProducts, brand, size, price]);
useEffect(() => {
if (price.length > 0) {
setFilteredProducts((list) =>
list.filter((product) => {
return product.price > price[0][0] && product.price < price[0][1];
})
);
}
}, [data?.getProducts, price, brand, size]);redux过滤器：
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-06-21 13:07:09
我认为把每件事都放在一个效果里没有什么错。对不同的依赖数组使用多个效果的唯一好处是，在只有一个参数更改的情况下，可以跳过一些操作。
但是我认为对于您的用例来说不是这样的，因为如果一个过滤器参数改变了，您必须重新计算所有过滤器并重新排序。如果只更改排序参数，那么唯一的好处就是避免重新过滤。
即使这样，使用多个效果的性能收益也可能会被忽略。产品清单来自后端，因此我认为我们可以放心地假设它不是很大--可能是几百个元素，但不是数百万或数十亿。过滤器操作很便宜，我们可以在最后执行排序步骤。
因此，只需使用一个带有组合依赖项的useEffect挂钩即可。
useEffect(() => {
const applySort = (filteredList) => (sort.length === 0)
? filteredList
: sort.includes('price.highest')
? filteredList.slice().sort((a, b) => b.price - a.price)
: filteredList.slice().sort((a, b) => a.price - b.price);
const sizePredicate = (product) => (size.length === 0)
|| product.size.includes(Number(...size));
const brandPredicate = (product) => (brand.length === 0)
|| product.brand.includes(Number(...brand));
const pricePredicate = (product) => (price.length === 0)
|| product.price > price[0][0]
&& product.price < price[0][1];
setFilteredProducts(
applySort(
data.getProducts()
.filter(sizePredicate)
.filter(brandPredicate)
.filter(pricePredicate)
)
);
}, [data.getProducts(), sort, price, brand, size]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72700805
复制相关文章
相似问题
腾讯云开发者
