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 }，并在 render 中使用 return 其他条件，例如 if (!this.state.data).

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

react.js - Deep Object in state with async data does not work

javascript

ajax

asynchronous

reactjs

react-jsx