反応する子オブジェクトのキーと値のペアにアクセスする

Question

私は、親コンポーネントが渡したオブジェクトからキーと値のペアを持つリスト要素を返します。それはなぜ機能しないのですか？

エラー：TypeError：未定義（...）のプロパティ 'props'を読み取ることができません。エラーは、return文のthis.props.data呼び出しのためです。これは、データが小道具を通らないということでは問題ではありません。私は反応出力ツリーを見て、私のデータオブジェクトは実際に子供に渡されます。あなたは合格する必要があるので、はは、コンポーネントのインスタンスを反応しない機能を参照しているmap関数内

[{ 
    "category": "Bills", 
    "month": { 
    "feb": 9, 
    "mar": 169, 
    "apr": 10, 
    "may": 867, 
    "jun": 394, 
    "jul": 787, 
    "aug": 1112, 
    "sep": 232, 
    "oct": 222, 
    "nov": 306, 
    "dec": 1096 
    } 
}]; 

Answer 1

this：ここ

class Parent extends React.Component { 
    render(){ 
    return (
     <div> 
      {this.props.transactions.map(function(el,i) { 
      return <div key={i}> 
       <div> 
        {el.category} 
       </div> 
       <Child data={el.months}/> 
      </div>; 
      })} 
     </div> 
    ); 
    } 
} 
class Child extends React.Component { 
    render(){ 
    return (
     <ul> 
     {Object.keys(this.props.data).map(function(key,index) { 
      return <li key={index}>{this.props.data[key]}</li> 
     })}; 
     </ul> 
    ); 
    } 
} 

は、親コンポーネントによって渡されたデータであります thisを次のように明示的に指定します。

（1）オンザフライで：あなたのクラスにlistItemsメソッドを追加

{ 
    Object.keys(this.props.data).map(this.listItems.bind(this)) 
}; 

と：：別の方法では

---

（2）

{ 
    Object.keys(this.props.data).map(function(key,index) { 
    return <li key={index}>{this.props.data[index]}</li> 
    }, this) 
}; 

listItems(key, index) { 
    return <li key={index}>{this.props.data[index]}</li> 
} 

---

Answer 2

@Basimはすでに与えました 正しい答え。 ES6を使用している場合は、このようにすることもできます。配列は、OGの項目が追加または削除されて並べ替えることも特にない場合は、

{Object.keys(this.props.data).map((key,index)=> { 
     return <li key={index}>{this.props.data[key]}</li> 
    })};