反應 - 按對象屬性過濾

Question

我想通過屬性過濾對象，但我無法使它工作。

數據中的對象的構成就像這樣：

我對UID獲取數據，然後繪製從該對象中的所有項目，但我不能讓過濾器的工作。

Render方法看起來像這樣：

render() { 
 
    return(
 
     <div> 
 
     {Object.keys(this.state.dataGoal) 
 
      .filter(key => key.main == true) 
 
      .map((key, index) => { 
 
      return <div key={key}> 
 
        <h1>{this.state.dataGoal[key].name}</h1> 
 
        <p>{this.state.dataGoal[key].main}</p> 
 
        </div> 
 
      })} 
 
     </div>

任何想法我做錯了嗎？

感謝您的幫助， 的Jakub

Answer 1

Object.keys返回該對象的keys，這意味着它返回該對象中每個鍵的字符串數組。

obj = { 'a': 1, 'b': 2 }; 
Object.keys(obj); // ['a', 'b'] 

所以來訪問你有使用該密鑰來訪問它是財產的價值，你的情況會是這樣的：

filter(key => this.state.dataGoal[key].main == true) 

Answer 2

假設this.state.dataGoal從公佈的目標數組對象，那麼你的過濾器是錯誤的。應該是：

{Object.keys(this.state.dataGoal) 
    .filter(key => this.state.dataGoal[key].main === true) 
    .map((key, index) => { 
    return <div key={key}> 
      <h1>{this.state.dataGoal[key].name}</h1> 
      <p>{this.state.dataGoal[key].main}</p> 
      </div> 
    })} 

注意，現在是.filter(key => this.state.dataGoal[key].main === true)因爲鑰匙是串，像Khasdfasdfasdfasdfads並希望通過此鍵，以便檢查其main屬性來訪問goal對象。