我有一个搜索栏,您可以在其中输入员工姓名,它应该会根据过滤器返回姓名。我有一个嵌套的 JSON 对象(如下所示),我需要在其中钻取该对象以访问数组中的员工姓名。
你可以看到我尝试实现的多个选项(它们被注释掉了)
我的问题是代码没有过滤名称并返回所有名称而不是搜索的名称。我收到此错误 TypeError: Cannot read property 'filter' of undefined
以下代码用于访问另一个组件中的员工姓名:
{test.map((result) => (result.details.map((innerArr) =>
<h5>{innerArr.employee}</h5>
)))}
如何在下面的代码中实现上面的内容
const SearchByEmpComp = () => {
const [company, setCompany] = useState([
{
"company": "HIJ",
"_id": "610aeaec618ac5902c466541",
"details":
[
{
"employee": "Lesley Peden",
"notes": "Lesley's note",
"_id": "610aeaec618ac5902c466542"
},
{
"employee": "Wayne Smith",
"notes": "Wayne's note",
"_id": "610aeaec618ac5902c466543"
}
],
},
{
"company": "ABC",
"_id": "61003ff8e7684b709cf10da6",
"details":
[
{
"employee": "David Barton",
"notes": "some note!!",
"_id": "610aebb2618ac5902c46654e"
}
],
}
]);
//below code does not work
//attemp 1
const test = company.filter((r) =>
r.details.map((innerArr) => {
return innerArr.employee.toLowerCase().includes
(searchField.toLowerCase());
})
);
//attemp 1
// const test = company.map((el) => {
// return {...element, detail: element.detail.filter((details) =>
// details.employee.toLowerCase().includes
// (searchField.toLowerCase()))}
// })
//attemp 2
// const test = company.filter((res) => {
// return res.details.map((innerArr) =>
// innerArr.employee.toLowerCase().includes
// (searchField.toLowerCase()));
// });
//attemp 3
// const test = company.filter((comp) =>
// comp.details.employee.toLowerCase().includes(searchField.toLowerCase())
// );
const deatils = () => {
if (searchShow)
return <EmpDetailsByName test={test} />
}
};
return (
<>
<FormControl
type="search"
placeholder="Type Customer Name Here"
/>
<div>
<Button
onClick={handleClick}
>
Enter
</Button>
<div>{deatils()}</div>
</div
);
};
渲染名字的代码
const EmpDetailsByName = ({ test }) => {
return (
<>
{test.map((result) =>
(result.details.map((innerArr) =>
<h5>{innerArr.employee}</h5>
)))}
</>
);
};
export default EmpDetailsByName;
最佳答案
除了 Werlious 的回答之外,如果您正在寻找仍包含在内的公司,那么您可以按此处所示进行映射。第一个映射仍将返回已过滤掉所有员工的公司。第二个映射将过滤掉没有任何详细信息的公司。
第三种是更现代的方法,只返回员工。但是有无数的变体可以用于此。
const company = [
{
company: "HIJ",
_id: "610aeaec618ac5902c466541",
details: [
{
employee: "Lesley Peden",
notes: "Lesley's note",
_id: "610aeaec618ac5902c466542",
},
{
employee: "Wayne Smith",
notes: "Wayne's note",
_id: "610aeaec618ac5902c466543",
},
],
},
{
company: "ABC",
_id: "61003ff8e7684b709cf10da6",
details: [
{
employee: "Lesley Peden",
notes: "some note!!",
_id: "610aebb2618ac5902c46654e",
},
],
},
];
const searchField = "les";
//attemp 1
const test = company.map((element) => {
return {
...element,
details: element.details.filter((details) =>
details.employee.toLowerCase().includes(searchField.toLowerCase())
),
};
});
console.log("test", test);
const test2 = company
.map((company) => {
let details = company.details.filter((detail) =>
detail.employee.toLowerCase().includes(searchField.toLowerCase())
);
if (!details.length) {
return null;
}
return { ...company, details };
})
.filter(Boolean);
console.log("test2", test2);
// Modern browser version of filtering to only the employees :)
const test3 = company.flatMap((company) =>
company.details.filter((detail) =>
detail.employee.toLowerCase().includes(searchField.toLowerCase())
)
);
console.log("test3", test3);
https://stackoverflow.com/questions/68689006/