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;