将变量设置为React中的子节点

我真的很困扰看起来很简单的问题。我正在使用React并尝试将变量设置为传递的状态。将变量设置为React中的子节点

这里是传递

{ 
    "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" 
    } 
    ] 
}

我能够设定在母公司层面的变量就好例如JSON ....

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

然后在概述窗格中，我能够根据预期的JSON数据设置字段。（见下文）

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

但是我不能够得到吃药所以我尝试有以下...

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

而且在药物窗格......

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

当我做了上述但我得到的错误“不能读取属性'0'未定义。任何想法如何从JSON中提取药物？

来源

2017-07-25 jgoraya

你能分享，你实际调用您的要求，或者你设置的默认状态，你刚才提到的JSON对象？作为this.state.PATIENT越来越不确定。 –

我收到错误“无法读取未定义的属性'0'。

OverviewPane部件表明this.state.PATIENT作为阵列，以便访问Meds如this.state.PATIENT.Meds将导致导致undefined（除非有Meds属性PATIENT阵列上），并因此是错误。

为了避免这种情况，你可以做

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

其次，您要发送服药细节MedicationsPane为overview和访问他们为this.props.meds。将它们更改为相同的名称。

来源

2017-07-25 12:00:01 Venugopal

Venugopal感谢这工作！真的很感谢帮助。 – jgoraya

您正在通过this.state.PATIENT至OverviewPane为overview。

在OverviewPane你正在映射超过overview这暗示this.state.PATIENT是一个数组。

但是，当使用MedicationsPane时，您将this.state.PATIENT视为具有Meds属性的对象。如果this.state.PATIENT是一个数组，你应该访问Meds财产this.state.PATIENT[PATIENTINDEX].Meds[0]

来源

2017-07-25 12:04:45 marzelin

将变量设置为React中的子节点

回答

相关问题