这让我发疯。我创建了一个包含多个条目的列表。我添加了一个过滤功能,看起来效果不错。我已经检查了返回的结果数,但不知何故它只显示从第一行开始的结果数。
解释:
假设我搜索“Zonen”,并且过滤函数返回 ID 为 23、25、59 和 60 的 4 行,显示 ID 为 1、2、3 和 4 的行。我做错了什么!?
...
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>
...
更新
freights
通过 AJAX JSON 结果加载和填充。 freights
的一个对象如下所示:
我有一个文本框,用户可以在其中执行搜索。此搜索应返回属性包含搜索字符串的所有 freight
对象。
过滤器
非常复杂,因为我还想搜索 cargo 的子对象。也许有更简单的方法?
“Zones”只是用户可以搜索的搜索字符串的示例。
最佳答案
既然您的意图更加清晰,我建议使用这个简单得多的解决方案。
首先,您可以编写一个递归实用程序 fn 来获取 n 深度对象中所有键的所有值。例如,像这样(我在那里使用 lodash 的实用程序 fn isObject
):
const getAllValues = (obj) => {
return Object.keys(obj).reduce(function(a, b) {
const keyValue = obj[b];
if (_.isObject(keyValue)){
return a.concat(getAllValues(keyValue));
} else {
return a.concat(keyValue);
}
}, []);
}
现在您已经拥有了所有对象值的数组,它使您的过滤器
变得非常简单:
let filteredList = this.state.freights.filter((freightItem) => {
const allItemValues = getAllValues(freightItem);
return allItemValues.includes(this.state.search);
});
应该是这样。如果出现问题,请大声喊叫。
关于javascript - React - 过滤返回错误的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45484795/