通过对象数组搜索函数

Question

我对react非常陌生，需要一个搜索函数，该函数的结果应该返回匹配的"在类别中"、"在子类别中"one_answers"在产品中"，类似于下面的端点。我下面的代码只在用户输入productname时返回匹配，如果使用categoryname或subcategoryName搜索则返回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"
}
],
},
],
},]

Answer 1

对于客户端搜索，使用现有库(例如Fuse.js(可能比自己实现搜索更容易。它很容易实现，并且运行得很好。

他们的网站上有一个现场演示，你可以看看它是否符合你的要求。