我试图从具有多数组的列表中实现搜索功能。所以我想从数组中搜索特定的关键字。我已经尝试过,但会引发错误。
要搜索的数组:
const listComponent = [{
id: 0,
title: "Common",
subMenu: [{
image: "",
secTitle: "",
subTitle: ""
}]
},
{
id: 1,
title: "Compute",
subMenu: [{
image: require("../../assets/images/scaling.png"),
secTitle: "one comp",
subTitle: ""
},
{
image: require("../../assets/images/ec2.png"),
secTitle: "two comp",
subTitle: ""
},
{
image: require("../../assets/images/lambda.png"),
secTitle: "three comp",
subTitle: ""
},
{
image: require("../../assets/images/zone.png"),
secTitle: "four comp",
subTitle: ""
}
]
},
{
id: 2,
title: "Second",
subMenu: [{
image: "",
secTitle: "",
subTitle: ""
}]
},
{
id: 3,
title: "Third",
subMenu: [{
image: "",
secTitle: "",
subTitle: ""
}]
},
{
id: 4,
title: "Fourth",
subMenu: [{
image: "",
secTitle: "",
subTitle: ""
}]
}
];
类声明:
constructor(props) {
super(props);
this.state = {
components: listComponent,
filterResult: listComponent
};
this.filterComponents = this.filterComponents.bind(this);
}
UNSAFE_componentWillReceiveProps(nextProps) {
this.setState({
components: nextProps.components
});
}
过滤器逻辑:
filterComponents = event => {
let value = event.target.value;
let components = this.state.components;
let filterResult = components.filter(
component =>
component.subMenu.findIndex(sub =>
sub.secTitle.toLowerCase().includes(value)
) !== -1
);
console.log(filterResult);
this.setState({ filterResult });
};
JSX:
<ul className="listAll">
{this.state.filterResult.map((items, key) => (
<li key={key}>
<div className="compTitle" onClick={()=> this.openCloseComponent(items.id)} >
<p>{items.title}</p>
{this.state.isComOpen === items.id && this.state.isOpen ? (
<KeyboardArrowDown className="compArrow" /> ) : (
<KeyboardArrowUp className="compArrow" /> )}
</div>
<ul className={ this.state.isComOpen===i tems.id && this.state.isOpen ? "displayBlock secondDrop" : "displayNone" }>
{items.subMenu.map((submenu, i) => (
<li key={i}>
<img src={submenu.image} alt="" />
<div>
<p className="secTitle">{submenu.secTitle}</p>
<p className="subTitle">{submenu.subTitle}</p>
</div>
</li>
))}
</ul>
</li>
))}
</ul>
{this.state.filterResult.length === 0 && (
<p className="noComp">No components found</p>
)}
问题
我想在 subMenu
中搜索 secTitle
。应显示与任何 secTitle
匹配的关键字,而应隐藏 other
。 about 代码会引发错误。
那么我该如何解决它,任何答案将不胜感激!
如果我搜索one comp
,输出应该是
{
id: 1,
title: "Compute",
subMenu: [
{
image: require("../../assets/images/scaling.png"),
secTitle: "one comp",
subTitle: ""
}
]
}
但现在的输出是,
{
id: 1,
title: "Compute",
subMenu: [
{
image: require("../../assets/images/scaling.png"),
secTitle: "one comp",
subTitle: ""
},
{
image: require("../../assets/images/ec2.png"),
secTitle: "two comp",
subTitle: ""
},
{
image: require("../../assets/images/lambda.png"),
secTitle: "three comp",
subTitle: ""
},
{
image: require("../../assets/images/zone.png"),
secTitle: "four comp",
subTitle: ""
}
]
}
最佳答案
代替
filterResult = components.filter((component, index) => {
console.log(component.subMenu[index].secTitle);
return component.subMenu[index].secTitle.toLowerCase().search(value) !== -1;
});
代码应该是这样的:
const listComponent = [
{
id: 0,
title: "Common",
subMenu: [
{
image: "",
secTitle: "abc",
subTitle: ""
}
]
},
{
id: 1,
title: "Common",
subMenu: [
{
image: "",
secTitle: "def",
subTitle: ""
}
]
}
]
let value = "abc";
let filterResult = listComponent.filter((component) => {
return component.subMenu.findIndex((sub) => {
return sub.secTitle === value;
}) >= 0;
});
console.log(filterResult);
关于javascript - 如何在reactjs中过滤多数组列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57816543/