Javascript 如何让一个数组在不同的函数下可以访问？

Question

我正在使用 React Table 从 API 中获取数据并将其填充到 table 中。我拨打 API 电话并获取数据。获得数据后，我提取一个包含电子邮件 ID 的字段，然后创建一个数组（emailList）。现在我想在 POST API 调用中将 emailList 中的数据用作正文的一部分。所以在下面的代码中，POST 调用下的 recipients 参数应该包含 emailList 的数据。 emailList 在 render 方法中全局声明为一个空数组。在我当前的设置中，由于范围问题，我得到了一个未定义的错误。如何使 POST 调用下的值可访问？我经历了几个范围界定 Whosebug 的答案并尝试但没有得到结果。

    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

我认为这是一个竞争问题（也就是您在电子邮件到达浏览器之前尝试 Post），因此您需要更改 post 等待获取的代码。这可以通过承诺轻松完成：

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

两次调用都会return相同的承诺，所以只有一个请求，但我们可以多次调用它。例如，我们可以在 POST:

之前调用它

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

Javascript 如何让一个数组在不同的函数下可以访问？

How to make an array accessible under different functions in Javascript?

javascript

arrays

scoping

web

reactjs