Question

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

function getGlassesNames () {

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


}

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

console.log #2 显示“对象”

但是...console.log #3 显示“0”

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

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 正确地使用数据 (Element[index]=value) 进行了查询，但是一旦我想使用它们的值，这些值是未定义的。

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

Answer 1

在 http 请求调用的 return 语句中携带 then of you 函数，这是 async 并且大部分时间将在 {{1} 之后调用}} 上面写的函数行。当您的请求得到响应时，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));
}

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

1 个答案: