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/创建具有许多选择的自己的加载指示器组件

Answer 2

在加载之前， this.state.data.metadata是undefined 。 访问undefined任何属性都会给您带来TypeError 。 这不是特定于React的，而是JavaScript对象引用的工作方式。

我建议您在初始状态下使用{ data: null }并从条件为if (!this.state.data) render返回其他内容。