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 - 使用异步数据的深度对象不起作用

回答

相关问题