如何使用反應在列表中應用過濾器

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 個產品。假設它是100,000 個產品，我將在100,000 個中一次又一次地迭代。

有什么更好的方法嗎？

Answer 1

如果你有幾千條以上的數據，最好將你所有的數據分組到map，然后你只需要使用key來檢索它們。

Map 數據分類：

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

如果你select這個類別，可以更快的獲取數據

var result = data[category_key];