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

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

本文关键字：状态 数据 不起作用 对象 异步 js 于异步 反应      更新时间：2023-09-26

我刚刚发现 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！

处理此类异步数据的正确方法是什么？

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

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/

this.state.data.metadata undefined，直到加载发生。访问undefined上的任何属性都会给您带来TypeError。这不是特定于 React 的——这只是 JavaScript 对象引用的工作方式。

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

相关文章：