Zugriff auf einen reaktiven Child-Objektschlüssel und ein Wertpaar

Question

Ich habe den folgenden Code, um ein Listenelement mit Schlüssel- und Wertpaaren von einem Objekt zurückzugeben, das von der übergeordneten Komponente mithilfe der Requisiten übergeben wurde. Warum funktioniert es nicht?

Ich bekomme eine Fehlermeldung, die besagt: TypeError: Kann Property 'von' undefined nicht lesen (...) Der Fehler ist wegen des Aufrufs this.props.data in meiner Return-Anweisung. Es ist kein Problem, dass die Daten nicht über die Requisiten weitergegeben werden. Ich habe den reaktiven Ausgabebaum durchgesehen und mein Datenobjekt wurde tatsächlich dem Kind übergeben.

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

Hier sind die in der übergeordneten Komponente übergebenen Daten:

[{ 
    "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 innerhalb der map Funktion auf die Funktion bezieht NICHT die Komponente Instanz reagieren, so dass Sie übergeben müssen this explizit wie folgt:

(1) Im laufenden Betrieb:

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

---

(2) In einem separaten Verfahren:

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

und listItems Methode Ihrer Klasse hinzufügen:

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

---

Answer 2

@Basim gab bereits die richtige Antwort. Wenn Sie ES6 verwenden, können Sie dies auch tun.