Résultat de plusieurs requêtes Ajax, l'une dépend de l'autre Sortie Ajax

Question

Merci beaucoup à Trevor Freeman, et Ryan Huynh de m'avoir guidé jusqu'à ce niveau. En tant que débutant à javascript et à reactjs, je n'avais aucune idée de ce que Ryan Huynh a mentionné dans sa réponse. Maintenant, j'ai collé tout mon code sur pastebin et l'URL est http://pastebin.com/xwJ2zi2y. Je dois exécuter la première liste de commandes de composants lorsque j'ai reçu un nouveau jeton dans RefreshToken. J'ai reçu le jeton d'actualisation au format json, par exemple. ["201509240"] dans la console. Merci beaucoup encore. Réfléchissez au composant "Refresh_token" en tant que votre contrôleur.

Answer 1

Il va gérer tout le jeton de vérification et obtenir la nouvelle commande lorsque le jeton a changé. La "liste de commande" ne doit pas savoir quand un jeton a changé, son travail consiste à re-afficher sa vue lorsqu'une nouvelle liste est arrivée.

//Section 1 Starts Here 
 
var Orderlist = React.createClass({ 
 
\t render: function(){ 
 
     var orderlist11 = []; 
 
     for(var i = 0; i < this.props.list.length; i++){ 
 
     \t var orderItem = this.props.list[i]; 
 
\t   orderlist11.push(
 
\t   \t <div className="card"> 
 
\t   \t \t <div className="title"> 
 
\t   \t \t \t Order Number {orderItem.ordernumber} 
 
\t   \t \t </div> 
 
     \t \t \t <div className="content"> 
 
     \t \t \t \t Date & Time : {orderItem.bizorderdate} <br /> 
 
      \t \t \t \t Username : {orderItem.userid} 
 
     \t \t \t </div> 
 
       </div> 
 
      ); 
 
\t \t } 
 
     return (
 
      <div> {orderlist11} </div> 
 
     ); 
 
    \t } 
 
}); 
 
    
 
////// Section 1 ends here 
 
    
 
    
 
var RefreshToken = React.createClass({ 
 
    \t 
 
    getInitialState : function(){ 
 
     return { 
 
      token : -1 , //Or anything that is not a token. 
 
      orderlist : [] 
 
     }      
 
    }, 
 

 
    refreshTimer : null, 
 
    componentDidMount : function(){ 
 
    \t this.get_order_list(); //Get the intial order list 
 
     this.refreshTimer = setInterval(this.refresh_token, 10000); //Call to check the new token every 10s 
 
    }, 
 
     
 
    refresh_token : function(){ 
 
     $.ajax({ 
 
      type: 'GET', 
 
      url: "/order/refresh", 
 
      headers: { 
 
       Accept : "application/json","Content-Type": "application/json" 
 
      }, 
 
      success: function (resp){ 
 
      \t var newToken = resp; 
 
      \t \t console.log(newToken); //it give the value of refresh eg. ["20150925313"] //Assume this will give the new value of the order list changed. 
 
       if(newToken != this.state.token){ 
 
        this.setState({ token: newToken}); 
 
        this.get_order_list() //Get the new list when token has changed. 
 
      //  console.log(this.state.resp); 
 
       } 
 
      }.bind(this) 
 
     }); 
 
    }, 
 

 
    \t get_order_list : function(){ 
 
     $.ajax({ 
 
      type: 'GET', 
 
      url: "/order/list/10/1", 
 
      headers: { 
 
      Accept : "application/json", "Content-Type": "application/json" 
 
      }, 
 
      success: function(orderlist) { 
 
\t    //  console.log(orderlist); 
 
\t    //  console.log(this.state.orderlist); 
 
      \t \t this.setState({orderlist: orderlist}); 
 
      \t }.bind(this), 
 
      \t error: function(xhr, status, err) { 
 
     \t \t } 
 
     }); 
 
    }, 
 

 
    render: function(){ 
 
    \t return <Orderlist list={this.state.orderlist} /> 
 
    } 
 
}); 
 
    
 
React.render(
 
    <RefreshToken />, 
 
    document.getElementById('list_of_orders') 
 
);