Javascriptでさまざまな機能の下で配列にアクセスできるようにするには？

Question

Im React Tableを使用して、APIからデータを取得し、それをテーブルに取り込みます。私はAPI呼び出しを行い、データを取得します。データを取得したら、電子メールIDを含むフィールドを抽出し、配列（emailList）を作成します。今度はPOST API呼び出しのbodyの一部としてemailListのデータを使いたいと思っています。したがって、以下のコードでは、POST呼び出しの下の受信者パラメータにemailListのデータが含まれているはずです。 emailListは、renderメソッド内で空の配列としてグローバルに宣言されます。私の現在の設定では、スコープの問題のために未定義のエラーが発生します。 POSTコールの下で値にアクセスできるようにするには？私は、いくつかのScoping StackOverflowの答えを試してみましたが、結果は得られませんでした。

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

私はあなたのポストは、getを待っていることを、あなたのコードを変更する必要があるので、（電子メール、ブラウザに到着する前に、別名あなたがポストにしてみてください）、これはむしろレースの問題だと思います。それは簡単に約束して行うことができます。

{ 
    //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)); 
    } 
} 

だから今我々が行うことができます。

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

両方の呼び出しは同じ約束を返しますので、ただ一つの要求をtheresのが、我々は複数回呼び出すことができます。たとえば、POSTを実行する前に呼び出すことができます。

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