將變量設置爲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中的子節點

回答

相關問題