按颜色和大小过滤产品阵列

Question

所以我有一个产品数组。其中一个产品的结构是这样的：

[ {
sizes: [
{
size: 'S',
colors: [
{color: 'gray', stock: 10},
{color: 'black', stock: 0}
],
},
{
size: 'L',
colors: [
{color: 'black', stock: 5},
{color: 'red', stock: 0}
]
}
],
...//other info
},
//other products

]我还有两种状态：

const [colors, setColors] = useState([])
const [sizes, setSizes] = useState([])

因此，当用户根据他们选择的尺寸和颜色进行过滤时，我希望相应地过滤产品阵列。

Answer 1

我会在这里使用HOF进行语法调整：

let shirts = {
sizes: [
{
size: "S",
colors: [
{ color: "gray", stock: 10 },
{ color: "black", stock: 0 }
]
},
{
size: "L",
colors: [
{ color: "black", stock: 5 },
{ color: "red", stock: 0 }
]
}
]
};
function bySizes(wantedSizes) {
return (shirt) => {
let toKeep = false;
wantedSizes.forEach((wantedSize) => {
if (shirt.size.toLowerCase() === wantedSize.toLowerCase()) toKeep = true;
});
return toKeep;
};
}
function byColors(wantedColors) {
return (shirt) => {
let toKeep = false;
shirt.colors.forEach((color) => {
wantedColors.forEach((wantedColor) => {
if (color.color === wantedColor) toKeep = true;
});
});
return toKeep;
};
}
let filteredShirts = shirts.sizes
.filter(bySizes(["S", "XS"]))
.filter(byColors(["black", "white"]))
console.log(filteredShirts);

Answer 2

您可以尝试useEffect。以下是用户选择颜色的示例

useEffect(() => {
const p = products.filter((product) => {return product.color == color});
setProducts([...p]);
}, [color])