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

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

javascript reactjs

Javascript 将变量设置为React中的子节点,javascript,reactjs,Javascript,Reactjs,我真的在努力解决一个看似简单的问题。我正在React中工作，试图将变量设置为已传递的状态下面是传递的JSON { "id": "6", "FName": "Chris", "LName": "Baker", "Height": "6'2", "Meds": [ { "MedicationName": "acetaminophen", "Doseage": "Take 2 daily with food", "NumRefills"

我真的在努力解决一个看似简单的问题。我正在React中工作，试图将变量设置为已传递的状态

下面是传递的JSON

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

我能够在父级设置变量，例如

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

class应用程序组件{
....
render（）{
返回(
....
....
);
}
}

然后在Overview窗格中，我可以根据JSON中的数据设置字段。（见下文）

类概览窗格扩展了组件{
....
render（）{
返回(
....
{this.props.overview.map（函数（P）{返回名字：{P.FName}
....
);
}
}

然而，我不能得到药物，所以我尝试有以下

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

class应用程序组件{
....
render（）{
返回(
....
....
);
}
}

在药物窗格中

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

类药物span扩展了React.Component{
...
渲染（）{
返回(
{this.props.meds.map（函数（meds））{
返回{Meds.MedicationName}；
})}
);
}
}

但是，当我执行上述操作时，出现错误“无法读取未定义的属性“0”。知道如何从JSON中提取药物吗

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

概览窗格

组件建议将

this.state.PATIENT

作为数组访问

MED

作为

this.state.PATIENT.med

将导致

未定义

（除非

PATIENT

数组上有

Meds

属性）以及错误

要避免这种情况，您可以这样做

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

class应用程序组件{
....
render（）{
返回(
....
{this.state.PATIENT.map（p=>{
返回值（p.Meds&p.Meds.length>0）？：空；
})}
....
);
}
}

其次，您正在将药物详细信息发送到

MedicationsPane

作为

overview

并作为

this.props.meds

访问它们。将它们更改为相同的名称

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

概览窗格

组件建议将

this.state.PATIENT

作为数组访问

MED

作为

this.state.PATIENT.med

将导致

未定义

（除非

PATIENT

数组上有

Meds

属性）以及错误

要避免这种情况，您可以这样做

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

class应用程序组件{
....
render（）{
返回(
....
{this.state.PATIENT.map（p=>{
返回值（p.Meds&p.Meds.length>0）？：空；
})}
....
);
}
}

其次，您正在将药物详细信息作为

概述

发送到

药物span

并作为

this.props.meds

访问它们。将它们更改为相同的名称。

您正在将

this.state.PATIENT

传递到

概览窗格

作为

概述

在

概览窗格中

您正在映射

概览

，这表明

此.state.PATIENT

是一个数组

但是，当使用

Medicinationspane

时，您将

this.state.PATIENT

视为具有

Meds

属性的对象。如果

this.state.PATIENT

是一个数组，则应将

Meds

属性视为

this.state.PATIENT[PATIENTINDEX].Meds[0]