Comment rendre un tableau accessible sous différentes fonctions en Javascript?

Question

Im utilisant React Table pour récupérer des données à partir d'une API et le remplir dans la table. Je fais un appel d'API et j'obtiens les données. Une fois que j'ai les données, j'extrais un champ qui contient les identifiants d'email et puis fais un tableau (emailList). Maintenant, je veux utiliser les données dans emailList comme la partie du corps dans l'appel API POST après. Ainsi, dans le code ci-dessous, le paramètre destinataires sous l'appel POST doit contenir les données de emailList. La liste emailList est déclarée globalement comme tableau vide dans la méthode render. Avec ma configuration actuelle, j'obtiens une erreur non définie en raison de problèmes de portée. Comment rendre la valeur accessible sous l'appel POST? J'ai traversé quelques réponses de StackOverflow de portée et ai essayé mais n'ai pas obtenu le résultat.

columns: [ 
    { 
filterable: false, 
Header: 'Action', 
accessor: 'action', 
Cell: (e) => (
    <button 
     onClick={() => { 
     axios.get(URL, { 
      headers: { 
      'content-type': 'application/json', 
      'Name' : user.Name, 
      }, 
      responseType: 'json', 
     }) 
     .then((response) => { 
      let responseData = response.data.data; 
      function getEmailList(input, email) { 
      var output = []; 
      for (var i=0;i<input.length; ++i) 
       output.push(input[i][email]); 
      return output; 
      } 
      emailList = getEmailList(responseData, "email"); 

      function fetchEmail() { 
      this.emailList = getEmailList(responseData, "email"); 
      } 

     }); 

     //console.log(new fetchEmail().emailList); 
     //Unable to get the value of emailList here 
     axios({ 
      method: 'post', 
      url: URL2, 
      headers: { 
      'content-type': 'application/json', 
      'Name' : user.Name, 
      }, 
      data: { 
      "topic": "product", 
      "message": { 
       "sender": "user1@xyz.com", 
       //For illustration I have hardcoded the email arrays for recipients 
       "recipients": ["support1@xyz.com", "support2@xyz.com"], 
       "data": { 
         "text": "refresh" 
       }, 
      "attachment": null, 
      "type": "", 
      }, 
      }, 
     }) 

Answer 1

Je pense que cela est plutôt un problème de course (aka vous essayez de poste avant les emails sont arrivés au navigateur), de sorte que vous devez changer votre code que le poste attend le get. Cela peut être facilement fait avec des promesses:

{ 
    //a cache 
    let promise; 

    //a promising getter: 
    function getEmails(){ 
    //if cached return 
    if(promise) return promise; 
    //else await the request 
    return promise = axios.get(URL,{/*options*/}).then(response => response.data.data.map(obj => obj.email)); 
    } 
} 

Alors maintenant, nous pouvons faire:

getEmails().then(console.log); 
getEmails().then(console.log); 

Les deux appels retourneront la même promesse, il ne ya donc une seule demande, mais nous pouvons l'appeler plusieurs fois. Par exemple, nous pouvons l'appeler avant de faire le POST:

getEmails().then(emails => { 
    axios({ 
    //... 
    data:{ 
    message:{ 
     recipients: emails 
    } 
    } 
}); 
});