React- FLUX - Objekt als Param übergeben - Undefined

Question

Ich habe eine einfache react App, ich bekomme eine Liste von Kontakten aus einem Web-API und ich möchte sie anzeigen. Jeder Kontakt hat einen Namen, Nachname, Telefon etc Meine App-Klasse die Kontakte bekommt rendert dann als

render(){ 
var contact= this.state.contacts[0]; 
return(<div><Contact label='First Contact' person={contact}/></div> 
) 
} 

Dann in meiner Kontaktklasse

render(){ 
return(
<div> {this.props.label} : {this.props.person.Name}</div>) 
} 

Wenn ich auf Chrom debuggen, sehe ich diese Person als Stütze übergeben wird, hat Objekt alle Parameter, aber wenn ich den Code ausführen, auf der {this.props.person.Name} ich Fehler

Cannot read property Name of undefined 

bekommen Wenn ich entfernen, dass {this.props.label } wird ohne Problem angezeigt. So kann ich Text als Requisite, aber nicht als Objekt übergeben. Irgendeine Idee?

• Edit: Ich kann auch die Eigenschaft Name als Kontakt person pass = {contact.Name} /> Dies funktioniert aber nicht den Kontakt als Objekt übergeben und dann Objekte im Render Lesen von

Answer 1

Meine Vermutung ist (da Sie flux verwenden), dass beim Laden der Seite (initial load) die Kontakte in Ihrem Zustand ein leeres Array darstellen.

Versuchen

var contact= this.state.contacts[0] || {}; 

und für einige gute Tipps => nicht Vars verwenden, verwenden const :-)

lassen Sie Ihre Komponente in die Flussspeicher hören:

Stellen Sie sicher, flux store enthält eine addChangeListener- und removeChangeListener-Funktion, die Sie in Ihrer Komponente aufrufen können, damit Ihre Komponente automatisch aktualisiert wird.