我需要帮助,因为我失去了主意哈哈...
我有一个主数组products
(只是一个示例):
[
{
"from": "country",
"maker": "name of maker",
"id": "1969",
"image": "image.jpg",
"label": "355",
"name": "name of product",
"price": "12.90",
"subscriber_price": "8.90",
"url_path": "url",
"occasion": null,
"colour": "31",
"origin": "397",
},
{
"from": "country",
"maker": "name of maker",
"id": "2043",
"image": "image.jpg",
"label": "362",
"name": "name of product",
"price": "24.90",
"subscriber_price": "24.90",
"url_path": "url",
"occasion": "51,376,155,39",
"colour": "31",
"origin": "395"
}
]
我正在使用此选择器组件。所以,我正在做的是: 我有一个选择器来选择带有“颜色”的产品。然后,我有另一个选择器来过滤带有“来源”的所选产品(例如,仅带有颜色:31),最后我要通过“标签”过滤它们...
事实是我有3个选择器,有3个函数可以选择它们,并且可以正常工作,但问题是我正在用setState擦除“ displayProducts”的渲染。因此,选择了3个选项后,我将无法返回。.
例如,我选择“ colour:31”和“ origin:397”和“ label:355” ..我不能回去告诉:最后我想要“ origin:395”,因为它不存在等等,而一种“颜色”可以具有不同的“标签,原产地...”
我正在执行类似的操作,但是它仅适用于一个选项,不能用于多个选项,并且没有保留解决方案来再次查找经过过滤的产品:
onChangeGetOrigin(originValue) {
this.setState(() => ({
activeOrigin: originValue,
displayProducts: this.state.displayProducts.filter(product => product.origin == originValue)
}));
}
有人能理解我在说什么吗? :-D
答案 0 :(得分:1)
您可以维护两个阵列。一个包含产品的完整列表,另一个包含应用过滤器后的派生数组。您可以使用派生列表进行显示,并使用原始数组进行选择。