react.js - 使用異步數據的深度對象不起作用

我剛剛發現React的狀態中有多個孩子的對象無法輕鬆呈現。react.js - 使用異步數據的深度對象不起作用

在我的例子我有分量通過AJAX與第三方API說：

var Component = React.createClass({ 
    getInitialState: function() { 
    return {data: {}}; 
    }, 

    loadTrackData: function() { 
    api.getDataById(1566285, function (data) { 
     this.setState({data: data}); 
    }.bind(this)); 
    }, 

    componentDidMount: function() { 
    this.loadTrackData(); 
    }, 

    render: function() { 
    return (
     <div> 
      <h2>{this.state.data.metadata.title}</h2> 
     </div> 
    ); 
    } 
});

的問題是，{this.state.data.metadata}呈現很好..

但{this.state.data.metadata.title}拋出錯誤Uncaught TypeError: Cannot read property 'title' of undefined！

處理這種異步數據的正確方法是什麼？

來源

2015-01-10 Kosmetika

嘗試使用'isMounted'方法，像這樣http://jsbin.com/wunaze/1/edit?js –

@Alexander這沒有幫助 – Kosmetika

您是否改變了'getInitialState'如例？ –

this.state.data.metadata是undefined直到加載發生。訪問undefined上的任何屬性將爲您提供TypeError。這不是React特有的 - 它只是JavaScript對象引用的工作方式。

我建議您在初始狀態下使用{ data: null }，並返回render以外的其他值，例如if (!this.state.data)。

來源

2015-01-11 01:15:57

如果頁面有異步操作，我總是喜歡加載加載微調器或指示器。我會這樣做

var Component = React.createClass({ 
    getInitialState: function() { 
    return {data: null}; 
    }, 

    loadTrackData: function() { 
    api.getDataById(1566285, function (data) { 
     this.setState({data: data}); 
    }.bind(this)); 
    }, 

    componentDidMount: function() { 
    this.loadTrackData(); 
    }, 

    render: function() { 
    var content = this.state.data ? <h2>{this.state.data.metadata.title}</h2> : <LoadingIndicator />; 
    return (
     <div> 
     {content} 
     </div> 
    ); 
    } 
});

與加載指標基本上它提高了用戶體驗，並不會得到太多不必要的驚喜。你可以在這裏創建你自己的加載指示器組件，其中有很多選擇http://loading.io/

來源

2015-01-10 13:00:24 ChinKang

react.js - 使用異步數據的深度對象不起作用

回答

相關問題