反应 Javascript 未定义变量

如何解决反应 Javascript 未定义变量

我在 Twilio Flex QueuesView（使用 React/Javascript）中添加了一个部分，但一直为变量 val 获取一个未定义或空的变量。

如果我从函数调用 getQueueInfoAxios() 中删除“JSON.stringify(Promise.resolve(”)，我会收到以下错误：

“未捕获的不变违规：对象作为 React 子项无效（找到：[object Promise]）。如果您打算渲染子项集合，请改用数组。”

async addAverageAcceptTime(flex,manager) {

        //Sets color codes for above or below threshold
        const aboveThreshold = { fontWeight: 'bold',color: 'red' };
        const belowThreshold = { fontWeight: 'bold',color: 'green' };

        const TWILIO_WORKSPACE_SID = manager.workerClient.workspaceSid;

        flex.Queuesstats.QueuesDataTable.Content.add(
            < flex.ColumnDeFinition
                key="average-accept-time-today"
                header="ASA"
                headerColSpanKey="average-accept-time"
                subHeader="Today"
                content={ (queue: flex.Queuesstats.activity_statistics) => {

                    const taskQueueKey = queue.key;

                    let val = "-";

                    
                    val = JSON.stringify(Promise.resolve(this.getQueueInfoAxios(manager,TWILIO_WORKSPACE_SID,queue.key)));

                    console.log(' Infunction result : val ',val);
  


                    return (<div style={belowThreshold}> {val}</div>);

                          }
                }

            />,{ sortOrder: 3 }
        );

    }

     async getQueueInfoAxios(manager,workSpaceID,taskQueue) {


         console.log("Get QueuesView axios Function called")

        const TWILIO_ACCOUNT_SID = manager.workerClient.accountSid;
        const TWILIO_WORKSPACE_TOKEN = manager.user.token;


        var currentASA;

         const url = 'https://taskrouter.twilio.com/v1/Workspaces/' + workSpaceID + '/TaskQueues/' + taskQueue + '/CumulativeStatistics';

         console.log('Axios call url',url)

      await axios.get(url,{
                headers: {
                    Authorization: 'Basic ' + Buffer.from(`${testACC}:${testAuth}`).toString('base64'),'Content-Type': 'application/json'
                }
      }).then(function (response) {

          console.log('Axios call: response',response);

            currentASA = response.data.avg_task_acceptance_time;
            return (currentASA);

        })
            .catch(function (response) {
                console.log(response);
                return response;
            });

         console.log('Axios call: currentASA',currentASA);
  
  
    }



  
}

解决方法

这里是 Twilio 开发者布道者。

您在这里遇到了一些问题。

第一个问题本身不是代码中的错误。您似乎正在从前端代码向 Twilio API 发出 API 请求。虽然我知道这是在 Flex 中，并且人们会假设只有员工会使用该系统，但将您的帐户 SID 和身份验证令牌嵌入客户端代码中仍然是不好的做法，恶意用户可以从中提取并用于滥用你的帐户。我建议您按照 how to securely call a Twilio Function from Flex 上的本教程将您想要的数据从 TaskRouter 获取到 Flex。

---

我也会解释你的代码出了什么问题。

首先，Promise.resolve() 返回一个新的 promise 对象，该对象使用您传递给它的值进行解析。您仍然必须调用 .then 来提取该值（或 await 承诺）。因此，调用 JSON.stringify(Promise.resolve("anything")) 将导致您尝试对 promise 对象进行字符串化，根据我刚刚进行的快速测试，结果是字符串 "{}"。

其次，您没有从 getQueueInfoAxios 函数返回任何内容，这会导致您的其余问题。

您的问题归结为函数中 async/await 和 then/catch 之间的混淆。由于您已将该函数定义为 async 并且您正在使用 await，因此最好提交并使用 try/catch 围绕您对 API 的调用并从那里返回您的响应。像这样：

  try {
    const response = await axios
      .get(url,{
        headers: {
          Authorization:
            "Basic " + Buffer.from(`${testACC}:${testAuth}`).toString("base64"),"Content-Type": "application/json",},})
    console.log("Axios call: response",response);
    currentASA = response.data.avg_task_acceptance_time;
    console.log("Axios call: currentASA",currentASA);  
    return currentASA;
  } catch(error) {
    console.log(response);
    return response;
  }

然后你可以这样调用：

val = await this.getQueueInfoAxios2(manager,TWILIO_WORKSPACE_SID,queue.key);

这应该会整理出您的代码，但请停止在客户端和 follow the tutorial to make this correct 中嵌入您的凭据。