数组不为空，但浏览器控制台显示 .length = 0 [React tsx - API 调用] [重复]

Question

在 React 组件中，我有一个函数（在渲染组件后触发）：

function getGlassesNames () {

    let outputArray:string[] = getGlassesOriginal();
    console.log(outputArray);
    console.log(typeof outputArray);
    console.log(outputArray.length);


} 

console.log #1 显示 '[]'。（您可以打开它并注意到它实际上是一个带有数据的 pobated 数组）

console.log #2 显示“对象”

但是...console.log #3 显示 '0'

内部函数“getGlassesOriginal”正在从 utils.tsx 调用，内容如下：

export function getGlassesOriginal ():string[] {
    let outputArray:string[] = [];


axios
    .get("https://www.thecocktaildb.com/api/json/v1/1/list.php?g=list")
    .then((response)=>{

        

        let responseDataJson=response.data.drinks;

        var i=0;
        for (let element in responseDataJson) {
             
            outputArray.push(responseDataJson[element].strGlass.toString());
           
        }
         
       }
            
)


return outputArray;




}

我只是不明白为什么我可以在控制台浏览器中看到 getGlassesNames 中的 outputArray 正确地使用 data (Element[index]=value) 进行了调整，但是一旦我想使用它们的值，这些值就是未定义的。

希望你能帮助我！提前谢谢！！！

Answer 1

在http请求调用的then语句中携带return函数，这是异步，大​​部分时间将在函数的return行之后调用如上所述。当您的请求得到响应时，then 被调用，您的函数已经返回了一段时间。

export async function getGlassesOriginal (): Promise<string[]> {
    return await axios
        .get("https://www.thecocktaildb.com/api/json/v1/1/list.php?g=list")
        .then(response => response.json())
        .then(({ drinks }) => drinks.map(item => item.strGlass));
}

用法：

const result = await getGlassesOriginal();