通过对象数组搜索功能答案

【问题标题】：Search function through an array of objects通过对象数组搜索功能
【发布时间】：2022-01-15 16:56:18
【问题描述】：

我是 React 的新手，需要一个搜索功能，其结果应返回匹配“类别中”、“子类别中”、“产品中”，类似的端点如下。我下面的代码仅在用户输入产品名称时返回匹配项，如果使用类别名称或子类别名称进行搜索，则返回 null

我的代码

const SearchSection = () => {
  const classes = useStyles();

  const theme = useTheme();

  const [inputData, setInputData] = useState("")

  const handleFilter = e =>{
     const searchWord = e.target.value
     setInputData(searchWord)
     const newFilter = categories.filter((product ) => {
           return product.productname.toLowerCase().includes(searchWord.toLowerCase())
     })

     if(searchWord === "") {
           setFilteredData([])
     }else {
           setFilteredData(newFilter ) 
     }
  }

  console.log(filteredData)
 return (
  <>
     <Navbar />
     <div className={classes.hero}>

        <div className={classes.overlay}></div>

        <div className={classes.heroContentContainer}>

           <div className={classes.heroSection}>
                 <div className={classes.SearchBar} >
                    <SearchField value={inputData} onChange={handleFilter} name="search" />
                 </div>
           </div>

        </div>
        
     </div>

     <Container>
             {filteredData.map(productName =>{
                return(
                   <SearchCard productName={productName}  />
                )
            })} 
     </Container>

  </>);};

端点数据结构

[
{
    "_id": "61afe234d43c9ad47188bff3",
    "categoryname": "Restaurant",
    "subcategory": [
        {
            "_id": "61b3823901e636b6782375ef",
            "subcategoryname": "Grilled Food",
            "subcategoryimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
            "product": [
                {
                    "_id": "61daec0b29f2c8c9337fa593",
                    "productname": "Poultry",
                    "productdescription": "Lorem ipsum dolor sit amet",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                },
                {
                    "_id": "61daec1729f2c8c9337fa59c",
                    "productname": "Fish",
                    "productdescription": "Lorem ipsum dolor sit amet",
                    "productimage": "https://res.cloudinary.com/ajeo/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                },
                {
                    "_id": "61daec2529f2c8c9337fa5a2",
                    "productname": "Vegetarian",
                    "productdescription": "Lorem ipsum dolor sit amet, consectetur ",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                }
            ],
        },
        {
            "_id": "61b3824501e636b6782375f3",
            "subcategoryname": "Traditional delicacies",
            "subcategoryimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
            "product": [
                {
                    "_id": "61daee16d94f72b6d15396a8",
                    "productname": "Peppered meat",
                    "productdescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                }
            ],
        },
        {
            "_id": "61b3824e01e636b6782375f7",
            "subcategoryname": "Crustacean",
            "subcategoryimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
            "product": [
                {
                    "_id": "61daee55d94f72b6d15396f8",
                    "productname": "Seafood",
                    "productdescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                }
            ],
        },
        {
            "_id": "61b3825601e636b6782375fb",
            "subcategoryname": "Sandwiches",
            "subcategoryimage": "https://res.cloudinary.com/ajeo/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
            "product": [
                {
                    "_id": "61b3839d01e636b678237638",
                    "productname": "Pizza",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
                    "imageurl": "uploads/placeholder-1639154589069-957455144.jpeg",
                    "productdescription": "undefined"
                },
                {
                    "_id": "61daeee9d94f72b6d1539784",
                    "productname": "Shawarma",
                    "productdescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, ",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                },
                {
                    "_id": "61daef43d94f72b6d15397c9",
                    "productname": "Burger",
                    "productdescription": "Lorem ipsum dolor sit amet, consectetur ",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                }
            ],
        },
        {
            "_id": "61daeae829f2c8c9337fa4f0",
            "subcategoryname": "Drinks",
            "imageurl": "",
            "product": [
                {
                    "_id": "61daef69d94f72b6d15397fa",
                    "productname": "Cocktail",
                    "productdescription": "Lorem ipsum dolor sit amet, ",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                },
                {
                    "_id": "61daef72d94f72b6d1539800",
                    "productname": "Alcoholic drinks",
                    "productdescription": "Lorem ipsum dolor sit amet",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                },
                {
                    "_id": "61daef79d94f72b6d1539806",
                    "productname": "Juice",
                    "productdescription": "Lorem ipsum dolor sit amet",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                },
            ],
            "subcategoryimage": "https://res.cloudinary.com/ajeo/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
    ],
},
 {
    "_id": "61afe234d43c9ad47188bf",
    "categoryname": "Dining",
    "subcategory": [
        {
            "_id": "61b3823901e636b6782375ef",
            "subcategoryname": "Shawama",
            "subcategoryimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
            "product": [
                {
                    "_id": "61daec0b29f2c8c9337fa593",
                    "productname": "Bird",
                    "productdescription": "Lorem ipsum dolor sit amet",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                },
                {
                    "_id": "61daec1729f2c8c9337fa59c",
                    "productname": "Cat",
                    "productdescription": "Lorem ipsum dolor sit amet",
                    "productimage": "https://res.cloudinary.com/ajeo/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                },
                {
                    "_id": "61daec2529f2c8c9337fa5a2",
                    "productname": "Vegans",
                    "productdescription": "Lorem ipsum dolor sit amet, consectetur ",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                }
            ],
        },
        {
            "_id": "61b3824501e636b6782375f3",
            "subcategoryname": "Delicacies",
            "subcategoryimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
            "product": [
                {
                    "_id": "61daee16d94f72b6d15396a8",
                    "productname": "Meat",
                    "productdescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                }
            ],
        },
        {
            "_id": "61b3824e01e636b6782375f7",
            "subcategoryname": "Crust",
            "subcategoryimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
            "product": [
                {
                    "_id": "61daee55d94f72b6d15396f8",
                    "productname": "food",
                    "productdescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                }
            ],
        },
        {
            "_id": "61b3825601e636b6782375fb",
            "subcategoryname": "Sand",
            "subcategoryimage": "https://res.cloudinary.com/ajeo/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
            "product": [
                {
                    "_id": "61b3839d01e636b678237638",
                    "productname": "Pizza",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg",
                    "imageurl": "uploads/placeholder-1639154589069-957455144.jpeg",
                    "productdescription": "undefined"
                },
                {
                    "_id": "61daef43d94f72b6d15397c9",
                    "productname": "Burger",
                    "productdescription": "Lorem ipsum dolor sit amet, consectetur ",
                    "productimage": "https://res.cloudinary.com/image/upload/v1642037819/uploads/placeholder_kmytyw.jpg"
                }
            ],
        },
    ],
},]

【问题讨论】：

标签： javascript reactjs search filter

【解决方案1】：

对于客户端搜索，使用现有库可能更容易，例如Fuse.js，而不是自己实现搜索。它很容易实现并且效果很好。

他们的网站上有live demo，您可以查看它是否符合您的要求。

【讨论】：

我会检查并恢复