如何使用react在列表中应用filter

Question

我制作了一个演示应用程序。其中我有几个类别例如手表、牛仔裤等

我想在单击任何类别时应用筛选器。换句话说，我想展示选定类别的产品。

这是我的代码

步骤

1. 最初显示所有项目
2. 当我应用过滤器运动鞋时，它只显示两项

3. 但我的问题是我每次都在整个列表中迭代。有更好的方法吗？

   useEffect(() => {        
   let fArr = state.filter(i => filterArray.indexOf(i.category) != -1);
   setProductState(fArr);
   }, [filterArray]);
   

选择的任何过滤器

const onItemClickHandler = item => {
setFilterArray([...filterArray, item]);
};

错误或任何更好的方法

每当我应用任何过滤器时，我都会一次又一次地迭代整个列表任何更好的方法。实际上，目前我只有100产品。假设是10000的产品，我将在100000中反复迭代。

有更好的方法吗？

Answer 1

如果您有数千个以上的数据，最好按组映射所有数据，然后只需要使用key即可检索它们。

按类别划分的地图数据：

var data = filterArray.reduce((x,v) => {
(x[v.category] = x[v.category] || []).push(v)
return x
}, {});

如果你选择了类别，你可以更快地获得数据

var result = data[category_key];