反應 - 過濾返回錯誤的行

這讓我瘋狂。我創建了一個包含多個條目的列表。我添加了一個過濾功能，似乎工作正常。我已經檢查過返回結果的數量，但不知何故，它只是顯示從第一行開始的結果編號。反應 - 過濾返回錯誤的行

對於解釋：

假設我搜索「佐南」和我的過濾函數返回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

感謝您的幫助，但現在它給我的錯誤'太多遞歸'。我需要檢查，如果也許有一個無限循環。 –

反應 - 過濾返回錯誤的行

回答

相關問題