如何使用react在列表中应用过滤器

Question

我进行了演示应用程序。其中有几类的示例，例如手表，牛仔裤等

我想在单击任何类别时应用过滤器。换句话说，我要向商品显示所选类别的商品。

这是我的code

步骤

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

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

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

选择的任何过滤器

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

错误或其他更好的方法

每当我应用任何过滤器时我会一次又一次地迭代整个列表任何更好的方法。实际上，目前我只有 100 个产品。让它成为 100,000 个产品，我会一次又一次地迭代 100,000 。

还有更好的方法吗？

Answer 1

如果您有数千个数据，最好按组映射所有数据，那么您只需要使用键即可检索它们。

按类别的地图数据：

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

如果选择类别，则可以更快地获取数据

var result = data[category_key];