反应 - 过滤返回错误的行

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

对于解释：

假设我搜索“佐南”和我的过滤函数返回4行ID为23，25，59和60，行与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> 
...

UPDATE

freights被加载并且通过AJAX JSON结果填充。的freights目的之一是这样的：

我有一个文本框，用户可以在其中进行搜索。此搜索应返回属性包含搜索字符串的所有freight对象。

filter太复杂了，因为我也想在货运的子对象中搜索。也许有一个更简单的方法？

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

来源

2017-08-03 dns_nx

我已经找到解决方案，为什么显示“错误”的货运条目。我需要在freight组件添加componentWillReceiveProps方法：

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

}

然后一切正常。

来源

2017-08-07 10:11:45

既然你的意图更清晰，我建议这个更简单的解决方案。首先，您可以编写一个递归实用程序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); 
    } 
    }, []); 
}

现在，你拥有所有对象的值的数组，它使你的filter很简单：

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

那应该是这样。如果某些东西不起作用，请给我留言。

来源

2017-08-03 14:16:02 Denialos

请在原始帖子中查看我的更新。还有什么不清楚的地方吗？ –

更新了我的答案。检查出来，并提供反馈:) – Denialos

感谢您的帮助，但现在它给我的错误'太多递归'。我需要检查，如果也许有一个无限循环。 –

反应 - 过滤返回错误的行

回答

相关问题