react.js - 处于异步数据状态的 Deep Object 不起作用

IT技术 javascript ajax asynchronous reactjs react-jsx
2021-05-13 03:51:52

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

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

2个回答

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

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 }的初始状态和返回别的东西从render与像的条件if (!this.state.data)。

其它你可能感兴趣的问题
上一篇跨域请求被阻止：即使在我的 API 上启用 CORS 后也会发生； 下一篇moduleDirectories 键无法导入我的测试工具