在Reactjs中使用RESTful服务

Question

我从reactjs开始,我想向RESTful服务发出GET请求,这是我的代码,任何人都可以帮助我吗？

render: function() {
$.ajax({
  url: "http://rest-service.guides.spring.io/greeting"
}).then(function(data) {
  $('.greeting-id').append(data.id);
  $('.greeting-content').append(data.content);
return <div style="background-color: #ffffff">
                    <p class="greeting-id">The ID is </p>
                    <p class="greeting-content">The content is </p>

                </div>;        
    }

}

我已经在html中加载了Jquery with react,但是我仍然无法让它工作,我错过了一些重要的东西？或者有更好的方法来做到这一点？我不想再使用另外一件事,只是反应和Jquery,还是更需要的东西？

谢谢你的帮助.

Answer 1

在componentDidMount方法中发出请求,并使用setState方法将RESTful服务返回的数据分配给组件的状态.在render方法中,您可以通过this.state.greetingId和this.state.greetingContent属性访问它:

componentDidMount: function(){
    $.ajax({
      url: "http://rest-service.guides.spring.io/greeting"
    }).then(function(data) {
        this.setState({
            greetingId: data.id,
            greetingContent: data.content
        });
    }
)},
render: function() {
    return <div style="background-color: #ffffff">
                <p class="greeting-id">The ID is {this.state.greetingId}</p>
                <p class="greeting-content">The content is {this.state.greetingContent}</p>
            </div>;        
}

有关详细信息,请参阅以下链接:https://facebook.github.io/react/tips/initial-ajax.html