javascript - react.js - 处于异步数据状态的深层对象不起作用

Question

我刚刚发现 React 状态下有多个子对象的对象不容易渲染。

在我的示例中，我有一个通过 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!

处理这种异步数据的正确方法是什么？

Answer 1

如果页面有异步操作，我总是喜欢添加加载微调器或指示器。我会这样做

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/