Javascript ReactJS async，等待结果

我对ReactJS还不熟悉，并试图理解它。现在我遇到了一种情况，即加载渲染所需的信息。但由于它是异步的，所以组件在信息传递给它之前呈现自己

var info;

function getInfo() {
    //this will come from backend REST with Backbone which takes a bit
}

var InfoPage = React.createClass({
    render: function() {        
        getInfo()

        return (
            <div>info: {info}</div>            
        );
    }
});

var信息；
函数getInfo（）{
//这将来自后端REST和主干，这需要一点时间
}
var InfoPage=React.createClass({
render:function（）{
getInfo（）
返回(
信息：{info}
);
}
});

现在div将不显示info值，因为它尚未在渲染中设置。那么我怎样才能让渲染器等待信息呢？或者这应该如何解决

---

实际的React.renderComponent是从顶层调用的，它会触发所有子组件，因此我认为我无法强制新渲染（我不应该？）。

您需要执行以下操作：

var InfoPage = React.createClass({
  getInitialState: function() {
     return {info: "loading ... "};
  },
  componentDidMount: function() {
     this.getInfo();
  },
  render: function() {        
    return (
        <div>info: {this.state.info}</div>            
    );
  },
  getInfo:function(){
     $.ajax({ url:"restapi/getInfo/whatever", .... }).success(function(res){
        this.setState({info:res});
     }.bind(this));
  }
});

var InfoPage=React.createClass({
getInitialState:函数（）{
返回{info:“正在加载…”}；
},
componentDidMount:function（）{
这个.getInfo（）；
},
render:function（）{
返回(
信息：{this.state.info}
);
},
getInfo:function（）{
$.ajax（{url:“restapi/getInfo/whatever”，…}）.success（函数（res）{
this.setState（{info:res}）；
}.约束（这个）；
}
});

组件安装

生命周期方法 根据文档，

componentDidMount

是执行ajax请求时应该使用的组件挂钩：

组件安装

在渲染发生后立即调用。。。如果您想与其他JavaScript框架集成，使用setTimeout或setInterval设置计时器，或发送AJAX请求，请使用此方法执行这些操作

例子 使用您的示例，代码可能如下所示：

var InfoPage = React.createClass({
  getInitialState: function () {
    return { info: {} };
  },

  componentDidMount: function () {
    $.ajax({
      url: '/info.json',
      dataType: 'json',
      success: function(data) {
        this.setState({info: data});
      }.bind(this)
    });
  },

  render: function() {        
    return (
      <div>info: {this.state.info}</div>            
    );
  }
});

var InfoPage=React.createClass({
getInitialState:函数（）{
返回{info:{}；
},
componentDidMount:函数（）{
$.ajax({
url:“/info.json”，
数据类型：“json”，
成功：功能（数据）{
this.setState（{info:data}）；
}.绑定（此）
});
},
render:function（）{
返回(
信息：{this.state.info}
);
}
});

getInitialState

上面，我们使用

getInitialState

方法返回一个空的

info

对象。这允许我们的组件在等待服务器返回数据时进行渲染

执行

componentDidMount

后，它将使用

this.setState

替换空的

info

和服务器数据，并重新呈现

组件

进一步阅读
您可以在中看到使用的这种方法。
在渲染例程中不应该有任何后端调用！如果不使用jQuery或jQuery.ajax（），人们将如何做到这一点？@ConAntonakos为什么不使用jQuery？如果您真的想摆脱jQuery，您可能需要检查一下。ajax的使用与QusaiJouda在这里演示的模式无关。您可以使用任何想要获取数据的方法。重点是演示用临时占位符值预填充状态的模式。如果现在有人在使用fetchapi（），现代web开发人员会使用它，这提供了一个有点相关的最佳实践，但无法回答实际问题。OP希望在渲染完成之前完成异步请求。这建议在渲染后运行任何异步方法，或者在第一次渲染后重新渲染。