React - 如何將過濾條件 object 與 arrays 作為對象數組的值進行比較

Question

我正在嘗試使用具有值數組（我的過濾條件狀態）的 object 過濾對象數組（我的產品數據）

這是我的過濾條件 state 數據結構的樣子：

{
productname: []
designer: []
sizes: []
category: []
}

這是我的產品數據 object 的示例：

[
{
    "id": "10",
    "productName": "M NRG BH Jacket",
    "designer": "NIKE",
    "category": "outerwear",
    "sizes": ["XS", "S", "M", "L", "XL"],
    "color": "limestone",
    "description": "CACT.US CORP...",
    "price": 400,
    "img": [
      "m-nrg-jacket-nike",
      "m-nrg-jacket-nike2",
      "m-nrg-jacket-nike3",
      "m-nrg-jacket-nike4"
    ]
 }
...
]

這是我目前嘗試使用減少 function 並遍歷我的每個 filterCriteria 為我的 displayProducts 組件設置 state 的嘗試

const [displayedProducts, setDisplayedProducts] = useState(productData);
  const filter = () => {
    let updatedDisplayedProducts = [];
    let count = 0;
    for (const filterKey in filterCriteria) {
      const currFilter = filterCriteria[filterKey];
      productData.reduce((accum, curr) => {
        console.log(currFilter);
        console.log(curr[filterKey]);
        if (!accum) {
          return productData;
        } else if (filterKey === "sizes") {
          if (filterCriteria[filterKey].includes(curr[filterKey])) {
            updatedDisplayedProducts.push(curr);
          }
        } else if (currFilter.includes(curr[filterKey].toUpperCase())) {
          updatedDisplayedProducts.push(curr);
        }
        console.log(updatedDisplayedProducts);
        setDisplayedProducts(updatedDisplayedProducts);
      }, []);
    }
  };

我嘗試了其他一些解決方案，但我總是遇到一個問題，即我基本上嵌套了太多 for 循環，並且它以某種方式改變了我的 state。 任何幫助是極大的贊賞！

Answer 1

很難理解你想用你的代碼做什么。

在我的代碼中，我認為

• 只有滿足所有 filterCriteria 的產品才會顯示
• 如果 filterCriteria 中的任何尺寸（例如“XS”）包含在實際產品的尺寸中，則將顯示該產品

解釋

我制作了新數組（這是 state 的副本，但新的參考），然后刪除了任何不滿足過濾器的產品

 import React, { useState } from 'react'; type Product = { id: string productName: string designer: string category: string sizes: string[] color: string description: string price: number img: string[] } const products: Product[] = [ { 'id': '1', 'productName': 'a', 'designer': 'NIKE', 'category': 'outerwear', 'sizes': ['S', 'M', 'L', 'XL'], 'color': 'limestone', 'description': 'CACT.US CORP...', 'price': 400, 'img': [ 'm-nrg-jacket-nike', 'm-nrg-jacket-nike2', 'm-nrg-jacket-nike3', 'm-nrg-jacket-nike4' ] }, { 'id': '2', 'productName': 'b', 'designer': 'NIKE', 'category': 'outerwear', 'sizes': ['XS', 'S', 'M', 'L'], 'color': 'red', 'description': 'CACT.US CORP...', 'price': 400, 'img': [ 'm-nrg-jacket-nike', 'm-nrg-jacket-nike2', 'm-nrg-jacket-nike3', 'm-nrg-jacket-nike4' ] }, { 'id': '3', 'productName': 'abc', 'designer': 'APPLE', 'category': 'outerwear', 'sizes': ['XS', 'S', 'M', 'L', 'XL'], 'color': 'blue', 'description': 'CACT.US CORP...', 'price': 400, 'img': [ 'm-nrg-jacket-nike', 'm-nrg-jacket-nike2', 'm-nrg-jacket-nike3', 'm-nrg-jacket-nike4' ] } ] const filterCriteria = { productName: [] as string[], designer: [] as string[], sizes: ['XS'] as string[], category: [] as string[], } function App() { const [displayedProducts, setDisplayedProducts] = useState(products); const filter = () => { const updatedDisplayedProducts = displayedProducts.filter(currentProduct=>{ const shouldDisplayed = (Object.keys(filterCriteria) as (keyof typeof filterCriteria)[]).every((filterKey)=>{ const currFilterValues = filterCriteria[filterKey]; console.log(`filter: ${filterKey}: currFilterValues`) if (currFilterValues.length === 0) return true if (filterKey === 'sizes') { return currFilterValues.some(item => currentProduct[filterKey].includes(item)) } else { return currFilterValues.includes(currentProduct[filterKey].toUpperCase()) } }) console.log(`shouldDisplayed: ${shouldDisplayed}`) return shouldDisplayed }) setDisplayedProducts(updatedDisplayedProducts) }; return ( <div className="App"> <button onClick={()=>filter()}>filter.</button> {displayedProducts.map(item => <div key={item.id}>{item;productName}</div>)} </div> ); } export default App;