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

我在从包含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的药物部分向下传递，以便“药物”窗格可以显示传递给它的内容。

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？真的困惑在这一点上，任何帮助，将不胜感激。

来源

2017-07-20 jgoraya

我真的不知道你的问题。你的MedicationsPane需要一系列的Meds（我不明白你为什么映射病人，因为它是一个对象而不是数组），并且你不知道如何正确渲染它，因为你不知道应该放什么“关键“？你能用（简化的）MedicationsPane组件编辑你的代码并显示你确切的问题吗？ – Nevosis

Nevosis MedicationsPane似乎工作正常，当我硬编码我的JSON。我认为问题出现在我的概览窗格中，并将状态交给meds变量。当我尝试一些简单的工作，如meds = {this.state.PATIENT.Meds [0]}，我得到一个未定义的错误。我 – jgoraya

请做一个小提琴。如果你发送PATIENT.Meds [0]，你不能映射道具，因为它的一个对象（没有meds节点，这就是它未定义的原因）。我认为你在使用地图时遇到问题 – Nevosis

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

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

来源

2017-07-20 12:07:50 Fawaz

感谢法瓦兹。我最初尝试了这一点，但当我做了一个错误返回，说明“未捕获TypeError：无法读取未定义的属性'0' – jgoraya

@ kuruption213做一个'console.log（this.state）'并查看json是否存在。也许你也可以分享回应。看起来患者的格式与上面给出的格式不同。 – Fawaz

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

回答

相关问题