Question

这让我发疯了。我创建了一个包含多个条目的列表。我添加了一个过滤功能，似乎工作正常。我已经检查了返回的结果数，但不知怎的，它只是显示从第一行开始的结果编号。

解释：

假设我搜索“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个对象。

filter非常复杂，因为我还要搜索货运的子对象。也许有一种更简单的方法？

“Zones”只是用户可以搜索的搜索字符串的示例。

Answer 1

既然你的意图更清楚了，我建议这个不那么复杂的解决方案。

首先，您可以编写一个递归实用程序fn来获取n深度对象中所有键的所有值。就像这样，例如（我在那里使用lodash＆f;实用程序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);
    }
  }, []);
}

现在您拥有所有对象值的数组，这使您的filter变得非常简单：

let filteredList = this.state.freights.filter((freightItem) => {
   const allItemValues = getAllValues(freightItem);
   return allItemValues.includes(this.state.search);
});

那应该是它。如果事情不起作用，请大声喊叫。

Answer 2

我找到了解决“错误”运费条目显示的原因。我需要在freight方法中添加componentWillReceiveProps方法：

componentWillReceiveProps(nextProps) {
    if(nextProps.freight) {
        this.setState({
            freight: nextProps.freight
        });
    }

}

然后一切正常。

React - 过滤返回错误的行

2 个答案: