Sử dụng dịch vụ RESTful trong Reactjs

Question

im bắt đầu với reactjs và tôi muốn thực hiện yêu cầu GET cho dịch vụ RESTful, đây là mã của tôi, bất kỳ ai cũng có thể giúp tôi không?

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

} 

tôi đã tải Jquery trong html với phản ứng, nhưng tôi vẫn không thể làm cho nó hoạt động, tôi thiếu một điều gì đó quan trọng? hoặc có cách nào tốt hơn để làm điều này? tôi không muốn sử dụng một thứ gì khác, chỉ phản ứng và Jquery, hay là thứ gì đó cần thiết hơn?

Cảm ơn sự giúp đỡ của bạn.

Answer 1

Thực hiện yêu cầu của bạn trong phương thức componentDidMount và sử dụng phương thức setState để gán dữ liệu được trả về bởi dịch vụ RESTful cho trạng thái thành phần của bạn. Trong Phương thức render bạn có thể truy cập nó thông qua các thuộc tính this.state.greetingId và 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>;   
} 

Hãy tham khảo các link sau để biết chi tiết: https://facebook.github.io/react/tips/initial-ajax.html

Answer 2

Vì vậy, tôi đang cố gắng để trả lời các bình luận tiếp theo để tải một cái nhìn khác nhau khi đăng nhập thành công

tôi sẽ bắt đầu bằng việc có 4 thành phần - Main, đăng nhập, SuccessResult, FailureResult

var LoginForm = React.createClass({ 
    render : function(){ 
    return (
     <form onSubmit={this.props.handleSubmit.bind(this, React.findDOMNode(this.refs.login))}> 
     <label for="logininfo">Login Info</label> 
     <input id="logininfo" type="search" placeholder="input" ref="login"/> 
     <input type="submit" value="LogIn" /> 
     </form> 
    ) 
    } 
}); 

var SuccessResult = React.createClass({ 
    render : function(){ 
    var entries = this.props.data; 
    return (
     <div> 
     Is success 
     </div> 
    ) 
    } 
}); 

var FailureResult = React.createClass({ 
    render : function(){ 
    return (
     <div> 
     Is failure 
     </div> 
    ) 
    } 
}); 

var Main = React.createClass({ 
    getInitialState : function(){ 
    return { 

    } 
    }, 

    render : function(){ 
    return (
     <div> 
     {this.state.success ? <SuccessResult entries={this.state.result}/> : <LoginForm handleSubmit={this.handleSubmit.bind(this,'maxea')}/>} 
     {this.state.failure ? <FailureResult /> : null} 
     </div> 
    ) 
    }, 
    handleSubmit : function(loginInfo){ 
    var component = this; 
    $.get('https://api.github.com/users/' + loginInfo). 
     then(function(response){ 
     component.setState({ 
      success : true, 
      result : response.data 
     }) 
     } , 
     function(error){ 
     failure : true 
     }); 
    } 
}); 

// Code goes here 
React.render(
    <Main />, 
    document.getElementById('example') 
); 

Bạn có thể sử dụng componentDidUnmount trong bất kỳ thành phần phản ứng nào để làm sạch khi bạn đã hoàn thành một thành phần.