Question

我在从包含JSON的对象设置变量时遇到问题。这是返回的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"
    }
  ]
}

在我的React代码中，我基本上使用不同组件中的JSON的不同部分。因此，我的应用程序组件将状态下移到其各自的组件（概述和Meds）。概述工作正常可能是因为我将整个状态向下移动然后基于密钥能够获得根值（即FName，LName）。然而，我正在努力解决与Meds有关的问题。我试图将JSON的meds部分从状态向下移动，以便Medications窗格可以显示传递给它的内容。

  class App extends ReactComponent {
  ....
  render() {
    //what worked before was needing to set state to this.state.PATIENT[0].Meds
    //use  console.log{this.state.PATIENT} to see if things output properly
    return (
      <App>
        <Article>
          <Header>
            <Section>
              <Accordion openMulti={false} active='0'>
                <AccordionPanel heading='Overview'>
                  <Box colorIndex='light-2' full='horizontal' direction='row' flex={false}>
                    <OverviewPane overview={this.state.PATIENT}/>
                  </Box>
                </AccordionPanel>
                <AccordionPanel heading='Medications'>
                  <Box colorIndex='light-2' full='horizontal' direction='row' flex={false}>
                  **<MedicationsPane meds={this.state.PATIENT.map(function (P,)){return P.Meds})}/>**
                </AccordionPanel>
              </Accordion>
            </Section>
          </Header>
        </Article>
      </App>
    );
  }
}


class MedicationsPane extends React.Component {  

  constructor(props) {
    super(props);
    autoBind(this);
  }

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

我认为我需要传递像P.id这样的密钥才能返回Meds，但似乎无法传入索引。或者我需要使用Children.Map？在这一点上真的很困惑，任何帮助都会受到赞赏。

Answer 1

你在json中的Meds是一个只有一个对象的数组，所以要访问Meds就像json.Meds [0]一样使用它。像这样传递：

<MedicationsPane meds={this.state.PATIENT.Meds[0]}/>

使用密钥从回调函数返回值

1 个答案: