Comment gérer récupérer avec javascript dans React

Question

Je suis nouveau avec réagir et j'essaie d'accéder aux données d'une API, j'ai fait deux fetch pour obtenir les valeurs de tableau et un gestionnaire pour imprimer une console.log lorsque vous cliquez sur une rangée d'une table. Lorsque je clique dans le tableau, il me montre l'identifiant du client (c'est-à-dire l'id que je reçois avec le get get client) mais quand j'ai essayé d'obtenir une autre valeur avec getHistory, il m'apparaît indéfini.

Voici les récupérations:

 getCustomers(){ 

     fetch(

      DOMAIN+'/api/customers/shop/'+this.props.salon, { 
       method: 'get', 
       dataType: 'json', 
       headers: { 
        'Accept': 'application/json', 
        'Content-Type': 'application/json', 
        'Authorization':'Bearer '+this.props.token 
       } 
      }) 
      .then((response) => 
      { 

       return response.json(); 
      }) 
      .then((responseData) => { 
       responseData.map(function (v) { 
        v.platform = v.app ? v.app.platform : null }) 
       this.setState({customers:responseData}); 
       //console.log(responseData); 

      }) 
      .catch(function() { 
       console.log("error"); 
      }); 
    } 


getHistory() { 
     fetch(
      DOMAIN+'/api/orders/',{ 
       method: 'get', 
       dataType: 'json', 
       headers: { 
        'Accept': 'application/json', 
        'Content-Type': 'application/json', 
        'Authorization':'Bearer '+this.props.token 
       } 
      }) 
      .then((response) => 
      { 

       return response.json(); 
      }) 
      .then((responseData) => { 
       responseData.map(function (v) { 
        v.platform = v.app ? v.app.platform : null }) 
       this.setState({orders:responseData}); 
       console.log(responseData); 

      }) 
      .catch(function() { 
       console.log("error"); 
      }); 

    } 

Voici le gestionnaire:

handleCellClick(y,x,row){ 
      //this.getHistory(this.state.orders); 

      var ab= this.state.orders 
      this.setState({ 
       open:true, 
       slideIndex: 0, 
       newForm:false, 
       customer:{...row,_id:row._id}, 
       order:{...x,customer:x.customer} 

      }); 
      this.getCustomers(row._id); 
      this.getHistory(x.customer); 
      console.log(row._id); 
      console.log(x.customer); 

     } 

Je reçois la row._id mais la valeur client me renvoie undefined,

Merci pour votre aide !

Answer 1

Vous devez renvoyer la promesse dans la méthode getHistory, puis enchaîner l'appel à cette méthode avec une clause then.

getHistory() { 
     return fetch(
      DOMAIN+'/api/orders/',{ 
       method: 'get', 
       dataType: 'json', 
       headers: { 
        'Accept': 'application/json', 
        'Content-Type': 'application/json', 
        'Authorization':'Bearer '+this.props.token 
       } 
      }) 
      .then((response) => 
      { 

       return response.json(); 
      }) 
      .then((responseData) => { 
       responseData.map(function (v) { 
        v.platform = v.app ? v.app.platform : null }) 
       this.setState({orders:responseData}); 
       console.log(responseData); 

      }) 
      .catch(function() { 
       console.log("error"); 
      }); 

    } 

puis l'appeler comme si dans la fonction de gestionnaire de clic cellulaire

handleCellClick(y,x,row){ 
     //this.getHistory(this.state.orders); 

     var ab= this.state.orders 
     this.setState({ 
      open:true, 
      slideIndex: 0, 
      newForm:false, 
      customer:{...row,_id:row._id}, 
      order:{...x,customer:x.customer} 

     }); 
     this.getCustomers(row._id); 

     this.getHistory(x.customer).then(response => console.log(response)) 
     console.log(row._id); 
     console.log(x.customer); 

    }