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

我刚刚发现，处于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>
    );
  }
});

var Component=React.createClass({
getInitialState:函数（）{
返回{data:{}；
},
loadTrackData:函数（）{
api.getDataById（1566285，函数（数据）{
this.setState（{data:data}）；
}.约束（这个）；
},
componentDidMount:函数（）{
这是loadTrackData（）；
},
渲染：函数（）{
返回(
{this.state.data.metadata.title}
);
}
});

问题是

{this.state.data.metadata}

呈现良好

但是

{this.state.data.metadata.title}

抛出错误

未捕获类型错误：无法读取未定义的属性“title”

---

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

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

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>
    );
  }
});

var Component=React.createClass({
getInitialState:函数（）{
返回{data:null}；
},
loadTrackData:函数（）{
api.getDataById（1566285，函数（数据）{
this.setState（{data:data}）；
}.约束（这个）；
},
componentDidMount:函数（）{
这是loadTrackData（）；
},
渲染：函数（）{
var content=this.state.data？{this.state.data.metadata.title}：；
返回(
{content}
);
}
});

---

加载指示器基本上改善了用户体验，不会带来太多不必要的惊喜。你可以在这里创建自己的加载指示器组件，有很多选择

this.state.data.metadata

在加载之前是未定义的。访问

undefined

上的任何属性都会出现

TypeError

。这不是特定的反应，而是JavaScript对象引用的工作方式

---

我建议您在初始状态下使用

{data:null}

，并从

render

返回其他内容，条件如下：

if（！this.state.data）

尝试使用

isMounted

方法，例如@Alexander这对您没有帮助更改

getInitialState

，如示例所示？@Alexander nope，我没有注意到。。这是否意味着我将需要提供我将使用的儿童属性？@Alexander你知道一些解决方案（可能是一些mixin）可以帮助解决这个问题吗？facebook的提示也默认提供字段