Question

我真的在努力解决看似简单的问题。我在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}/>
     ....
    );
   }
}

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

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

但是我无法获得Meds所以我尝试的是以下内容......

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

当我执行上述操作时，我会收到错误＆＃34;无法读取属性＆＃39; 0＆＃39;未定义的。知道如何从JSON中提取药物吗？

Answer 1

我收到错误“无法读取未定义的属性'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访问。将它们改为同名。

Answer 2

您将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]属性

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

2 个答案: