Javascript 反应-筛选返回错误的行
这快把我逼疯了。我创建了一个包含多个条目的列表。我添加了一个过滤功能,它似乎工作得很好。我检查了返回的结果数,但不知怎么的,它只是显示从第一行开始的结果数 解释如下: 假设我搜索Zonen,我的filter函数返回ID为23、25、59和60的4行,显示ID为1、2、3和4的行。我做错了什么Javascript 反应-筛选返回错误的行,javascript,reactjs,filter,Javascript,Reactjs,Filter,这快把我逼疯了。我创建了一个包含多个条目的列表。我添加了一个过滤功能,它似乎工作得很好。我检查了返回的结果数,但不知怎么的,它只是显示从第一行开始的结果数 解释如下: 假设我搜索Zonen,我的filter函数返回ID为23、25、59和60的4行,显示ID为1、2、3和4的行。我做错了什么 ... render() { let filteredList = this.state.freights.filter((freight) => { let search = thi
...
render() {
let filteredList = this.state.freights.filter((freight) => {
let search = this.state.search.toLowerCase();
var values = Object.keys(freight).map(function(itm) { return freight[itm]; });
var flag = false;
values.forEach((val) => {
if(val != undefined && typeof val === 'object') {
var objval = Object.keys(val).map(function(objitm) { return val[objitm]; });
objval.forEach((objvalue) => {
if(objvalue != undefined && objvalue.toString().toLowerCase().indexOf(search) > -1) {
flag = true;
return;
}
});
}
else {
if(val != undefined && val.toString().toLowerCase().indexOf(search) > -1) {
flag = true;
return;
}
}
});
if(flag)
return freight;
});
...
<tbody>
{
filteredList.map((freight)=> {
return (
<Freight freight={freight} onClick={this.handleFreightClick.bind(this)} key={freight.id} />
);
})
}
</tbody>
...
更新
通过AJAX JSON结果加载和填充货物。货物的一个对象如下所示:
我有一个文本框,用户可以在其中执行搜索。此搜索应返回属性包含搜索字符串的所有货运对象
过滤器非常复杂,因为我还想搜索货运的子对象。也许有更简单的方法
Zones只是用户可以搜索的搜索字符串的一个示例 既然您的意图已经明确,我建议您使用这个简单得多的解决方案 首先,您可以编写一个递归实用程序fn来获取n深度对象中所有键的所有值。例如,我使用lodash的实用程序fn isObject: 现在,您已经有了一个包含所有对象值的数组,这使您的过滤器变得非常简单:
let filteredList = this.state.freights.filter((freightItem) => {
const allItemValues = getAllValues(freightItem);
return allItemValues.includes(this.state.search);
});
应该是这样。如果出现问题,请大声呼叫。我找到了显示错误货运条目的解决方案。 我需要在货运组件中添加componentWillReceiveProps方法:
然后一切都很顺利。请在原始帖子中查看我的更新。还有什么不清楚的吗?更新了我的答案。查看并提供反馈:感谢您的帮助,但现在它给了我错误“太多递归”。我需要检查一下,是否有无限循环。你的货物数组有多大?有539个货物条目,每个条目有30个属性和12个子对象。会不会太多了?
let filteredList = this.state.freights.filter((freightItem) => {
const allItemValues = getAllValues(freightItem);
return allItemValues.includes(this.state.search);
});
componentWillReceiveProps(nextProps) {
if(nextProps.freight) {
this.setState({
freight: nextProps.freight
});
}
}