Question

我在我的React组件的componentDidMount中调用了一个REST服务：

loadData: function () {
    return $.getJSON(this.props.server+"/xxxxx/"+this.props.params.promotionid);

},
componentDidMount: function () {
    this.loadData().success(function (data) {
        console.log("After success");
        console.log(data);
        if(this.isMounted())
        {
            this.setState({
                prom: data
                //release: data.Release
            });
        }
    }.bind(this))
}

即使没有文档建议，也可以包含if（this.isMounted（））。请注意注释行。我们需要对此进行评论才能发挥作用。问题是，如果我从服务器获得的数据中包含一个子对象，即使使用isMounted（），它也不起作用。例如：

{
PromotionId: 1,
Description: "Hello three",
Category: "serviceid",
SpecialID: 23666,
ProjectManager: "Tarkidi Touvouda",
Requestor: "George Klapas",
Readiness: false,
SignOff: false,
SourceDestination: "developement-uat",
Status: "pending",
ReleaseId: 2,
Release: {
    ReleaseId: 2,
    ReleaseName: "Fall Second",
    ReleaseDate: "2015-10-05T00:00:00",
    ReleaseDeadline: "2015-10-05T00:00:00",
    ModifiedDate: "2015-10-21T12:48:45.753"
},
PromotionAssets: null,
ModifiedDate: "2015-10-21T12:48:45.753"

}

我在render（）中获取数据如下

var p=this.state.prom;
var rel=p.Release;

当我尝试访问找不到undefined的Releasename的rel.ReleaseName时出错。使其工作的唯一方法是删除您看到的注释（也就是说，在状态中具有将保存Release对象的单独字段）然后：

var rel=this.state.release;

对Release对象的后续调用成功。我为什么要那样做？我的意思是为此有一个单独的状态字段？

Answer 1

$.getJSON是异步调用，这意味着在等待响应时继续执行。因此，您的脚本会调用componentDidMount，之后会继续render()，而不会等待结果。

由于第一轮render()中的这一点，变量this.state.prom为undefined。因此，对this.state.prom.Release的调用会引发错误，因为您无法获取未定义对象的属性。

一个简单的解决方案可能是等到AJAX调用完成后状态已更新：

render: function() {
  if(!this.state.prom) {
    return <div>loading ...</div>;
  }
  // your code goes here
}

在componentDidMount上休息

1 个答案: