import Sidebaritems from "./Sidebaritems";
import data from "../data.json";
import { useState } from "react";
export default function Sidebar() {
const [search, setSearch] = useState("");
return (
<div className="sidebar">
<input
className="search"
type="text "
onChange={(e) => setSearch(e.target.value)}
/>
{data
.filter((item) => {
if (search === "") {
return item;
} else if (item?.name.toLowerCase().includes(search.toLowerCase())) {
return item;
}
})
.map((item, index) => (
<Sidebaritems key={index} item={item} search={search} />
))}
</div>
);
}这是我的代码搜索栏和过滤器从JSON，但当我在搜索栏中输入名称，它只过滤父不是从JSON的孩子
{
"name": "India",
"moduleId": 1,
"parentId": 0,
"children": [
{
"name": "Rajasthan",
"moduleId": 6,
"parentId": 1,
"children": [
{
"name": "Kota",
"moduleId": 11,
"parentId": 6,
"children": [
{
"name": "Form1",
"moduleId": 16,
"parentId": 11,
"path": "/Form-1"
},
{
"name": "Form2",
"moduleId": 17,
"parentId": 11
},
{
"name": "Form3",
"moduleId": 18,
"parentId": 11
},
{
"name": "Form4 ",
"moduleId": 19,
"parentId": 11
},
{
"name": "Form5",
"moduleId": 20,
"parentId": 11
}
]
},
{
"name": "Jaipur",
"moduleId": 12,
"parentId": 5,
"children": [
{
"name": "form6",
"moduleId": 21,
"parentId": 12
},
{
"name": "form7 ",
"moduleId": 22,
"parentId": 12
},
{
"name": "form8",
"moduleId": 23,
"parentId": 12
},
{
"name": "form9",
"moduleId": 24,
"parentId": 12
},
{
"name": "form10",
"moduleId": 25,
"parentId": 12
}
]
},
{
"name": "Udaipur",
"moduleId": 13,
"parentId": 5,
"children": [
]
},
{
"name": "jhalawar",
"moduleId": 14,
"parentId": 5,
"children": [
]
},
{
"name": "Rajsamand",
"moduleId": 15,
"parentId": 5,
"children": [
]
}
]
},
{
"name": "Gujarat",
"moduleId": 7,
"parentId": 1,
"children": [
{
"name": "Rajkot",
"moduleId": 41,
"parentId": 7,
"children": [
]
},
{
"name": "Ahmedabad",
"moduleId": 42,
"parentId": 5,
"children": [
]
},
{
"name": "Surat",
"moduleId": 43,
"parentId": 5,
"children": [
]
},
{
"name": "xyz",
"moduleId": 44,
"parentId": 5,
"children": [
]
}
]
},
{
"name": "Panjab",
"moduleId": 8,
"parentId": 1,
"children": [
]
},
{
"name": "Goa",
"moduleId": 9,
"parentId": 1,
"children": [
]
}
]
},
1条答案
按热度按时间qxgroojn1#
我认为，做一个递归过滤器，既可以处理父对象的值，又可以处理其子对象的值，最终可能会让用户感到困惑。用户更喜欢知道他们在使用网站做什么。
我建议在默认搜索过滤器的基础上添加几个过滤器。这需要你为你的**array.prototype.filter（）**函数编写一个回调来处理一个过滤器数组。对于数组中的每个过滤器，你可以使用一个对象添加一个条件函数，并使用它来检查你的对象。像这样：
然后使用**array.prototype.every（）**函数，检查对象是否检查活动过滤器的每个条件。希望这对您有所帮助。