リアクション - オブジェクト別のフィルタ

Question

プロパティでオブジェクトをフィルタリングしようとしていますが、動作させることができません。

私はUIDでデータをフェッチし、そのオブジェクトからすべての項目をマッピングしていますが、私は、フィルタの仕事をすることはできません：オブジェクト内の

データがそうのように構成されています。

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>

すべてのアイデアは、私が間違っているの何：Renderメソッドを

はそうのように見えますか？任意の助け

おかげで、this.state.dataGoalが掲載ゴール配列からオブジェクトであると仮定すると ヤクブ

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

は、その後、あなたのフィルタが間違っています。次のようになります。キーは、Khasdfasdfasdfasdfadsような何か文字列であり、あなたがそのmainプロパティをチェックするために、このキーによってgoalオブジェクトにアクセスしたいので、今それは.filter(key => this.state.dataGoal[key].main === true)だ

{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> 
    })} 

注意、。