React 异步函数未正确返回

Question

我正在像这样的组件中调用 util 函数：

const res = await makeTempTrackImports({artistName,QueryID});

util 函数从 supabase 调用一些数据，执行一些字符串方法，然后执行 async for of 循环，在其中我使用数据调用 Spotify API。此后，数据不会始终在 util 函数中返回，或者如果我尝试返回到组件。这是 util 的样子

export const makeTempTrackImports = async ({ artistName, QueryID }) => {
    const { data } = await 
    supabase.storage.from("audio").list(QueryID);
    const trackNames = Object.values(data).map((song) => {
        return song.name.replace(/_/g, "&").replace(".mp3", "");
    });

    let results = [];
    for await (const songName of trackNames) {
        const res = await getTrackIds({songName, artistName});
        if (res === 0 || res === undefined) return;
        results.push(res.tracks.items);
    }
    return results; <-- stops working by here
}; 

结果会不一致地显示在控制台中，但实际上不会返回到程序中。提前谢谢你

Answer 1

你回来得太早了。 return 将从函数作用域返回，而不返回空的

[]

结果数组。稍微改变一下 if 条件就可以了。

for await (const songName of trackNames) {
    const res = await getTrackIds({
        songName,
        artistName
    });
    if (res) results.push(res.tracks.items);
    // or if (res === 0 || res === undefined) return results;
    
}
return results; 

Answer 2

工作解决方案：将for of循环更改为

const results = await Promise.all(
  trackNames.map(
    (songName) => getTrackIds({songName, artistName})
  )
);