將未定義的數據傳遞給React組件

-1

我正在創建一個消耗數據API的實時儀表板。該應用程序是構建在節點API之上的同構反應應用程序，我使用的是Flux架構，更具體地說是alt implementation。將未定義的數據傳遞給React組件

在初始頁面加載我打電話componentDidMount，並傳遞給獲取數據

componentDidMount() { 
    MyActions.getData(); 
    MyStore.listen(this._onChange); 
}

由於這是調用外部API有在獲取該數據的延遲的作用，這意味着其將容納數據的狀態是undefined。爲了停止組件示數，因爲我會路過undefined數據我目前做如下：

render() { 

    let foo; 

    if(typeof this.state.apiData == "undefined") { 
     foo = (<div></div> 
    } else { 
     foo = (<MyComponent data={this.state.apiData} />) 
    ); 
}

雖然這部作品給人的感覺並不很優雅，有沒有更好的方式呈現之前趕上undefined數據組件？

來源

2015-07-04 joshuahornby10

你可以做的是使用componentWillMount()開始獲取數據。和你在render()功能正在做的檢查可能看起來像：

render() { 
    if (this.state.apiData === undefined) { 
    return null; 
    } 

    return (
    <MyComponent data={this.state.apiData} /> 
); 
}

而且，正如你所說，你的數據變化，如果需要

它可能是值得利用的 componentWillReceiveProps()檢查更改和重新呈現

來源

2015-07-04 09:34:19 knowbody

將未定義的數據傳遞給React組件

回答

相關問題