Variable auf Child-Knoten in React setzen

Question

Ich habe wirklich Probleme mit einem scheinbar einfachen Problem. Ich arbeite in React und versuche eine Variable auf den übergebenen Zustand zu setzen.

Hier ist die JSON, die Variablen auf der übergeordneten Ebene setzen ganz gut zum Beispiel ....

class App extends ReactComponent { 
    .... 
    render() { 
    return (
    .... 
    <OverviewPane overview={this.state.PATIENT}/> 
    .... 
    ); 
    } 
} 

Dann in der Übersicht Pane

{ 
    "id": "6", 
    "FName": "Chris", 
    "LName": "Baker", 
    "Height": "6'2", 
    "Meds": [ 
    { 
     "MedicationName": "acetaminophen", 
     "Doseage": "Take 2 daily with food", 
     "NumRefills": 2, 
     "RefillExp": "2017-05-31T15:38:50.02Z", 
     "FirstPrescribed": "2017-05-31T15:38:50.02Z", 
     "WFID": "string" 
    } 
    ] 
} 

ich in der Lage bin übergeben, ich Ich kann Felder basierend auf den Daten aus dem JSON wie erwartet setzen. (Siehe unten)

class OverviewPane extends ReactComponent { 
     .... 
     render() { 
     return (
     .... 
     <td>{this.props.overview.map(function(P){return <label key={P.id}> First Name: {P.FName}</td> 
     .... 
     ); 
     } 
    } 

aber ich nicht in der Lage bin, die Meds zu bekommen, so was ich versuche, gibt es folgende ...

class App extends ReactComponent { 
    .... 
    render() { 
    return (
    .... 
    <MedicationsPane meds={this.state.PATIENT.Meds[0]}/> 
    .... 
    ); 
    } 
} 

Und in der Medikationen Pane ...

class MedicationsPane extends React.Component { 
... 
    render() { 
    return (
     <List> 
      {this.props.meds.map(function(Meds) { 
      return <ListItem justify='between' separator='horizontal' key={Meds.MedicationName}>{Meds.MedicationName}</ListItem>; 
      })} 
     </List> 
    ); 
    } 
} 

Wenn ich die oben genannten jedoch bekomme ich den Fehler "Kann nicht lesen '' print '' undefined. Irgendeine Idee, wie kann ich die Medikamente aus dem JSON extrahieren?

Answer 1

Ich bekomme den Fehler "Kann die Eigenschaft '0' von undefined nicht lesen.

OverviewPane Komponente legt nahe, dass this.state.PATIENT als Array so Meds als this.state.PATIENT.Meds Zugriff wird in undefined Ergebnis Ergebnis (es sei denn, es eine Meds Eigenschaft auf der PATIENT Array ist), und so ist der Fehler.

Um dies zu vermeiden, können Sie zweitens

class App extends ReactComponent { 
    .... 
    render() { 
    return (
    .... 
    {this.state.PATIENT.map(p => { 
     return (p.Meds && p.Meds.length > 0) ? <MedicationsPane meds={p.Meds}/> : null; 
    })} 
    .... 
    ); 
    } 
} 

tun, Sie Medikamente Details zu MedicationsPane als overview und den Zugriff auf sie als this.props.meds senden. Ändern Sie sie auf den gleichen Namen.

Answer 2

Sie übergeben this.state.PATIENT an OverviewPane als overview.

In OverviewPane mappen Sie über overview, was darauf hindeutet, dass this.state.PATIENT ein Array ist.

Wenn Sie jedoch MedicationsPane verwenden, behandeln Sie this.state.PATIENT als Objekt mit der Eigenschaft Meds. Wenn this.state.PATIENT ein Array ist, sollten Sie Meds Eigenschaft als this.state.PATIENT[PATIENTINDEX].Meds[0]