反应异步功能未正确返回答案

【问题标题】：React async function not returning correctly反应异步功能未正确返回
【发布时间】：2022-10-02 09:58:28
【问题描述】：

我在这样的组件中调用 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
};

结果将不一致地显示在控制台中，但实际上不会在程序中返回。先感谢您

是trackNames 真的是异步可迭代? （提示：它不会出现在您提供的代码中）另外，您能否正确格式化您的代码 -
if (res === 0 || res === undefined) return; 将退出函数，返回 undefined ...这不会“继续” for 循环
@JaromandaX for await...of works on both sync and async iterables
@MichaelBrenndoerfer - 是的 - 所以，我想因为它是最新的for 玩具，即使它完全不合适也应该使用
好吧，为了能够调用异步函数作为循环的一部分，这是必要的。否则，真正的问题是，您将如何遍历集合并进行异步调用？（Promise.all 仅当我需要打电话等待他们所有人时）

标签： javascript reactjs asynchronous for-of-loop

【解决方案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;

【讨论】：

【解决方案2】：

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

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

【讨论】：