Javascript 在react中使用async/await未定义

我试图使用GithubAPI获取用户的项目，并在弹出窗口中列出它们。我很难弄清楚为什么async/await不起作用，而我最终传递的数据总是未定义的

这是我从api获取数据的方式（编辑为用于…of）：

导出默认异步函数GitHubFetch（{userName}）{
让returnArray=[]；
let response=等待customFetch(
url.GitHub+“用户/”+用户名+“/repos”
);
for（响应的常量元素）{
让project={}；
project.name=element.name；
project.description=element.description；
project.html\u url=element.html\u url；
让langResponse=wait customFetch（element.languages\u url）；
project.languages=Object.keys（langResponse）；
returnArray.push（项目）；
}
log（“我从fetch返回的数组是：”，returnArray）；
返回数组；
}

此函数返回的returnArray的console.log为：

[{“name”：“cthulu_finance”，“description”：“用react和node.js/express编写的股票交易应用程序”，“html_url”：”https://github.com/contip/cthulu_finance“，”语言“：[”类型脚本“，”HTML“，”CSS“]}，“{”名称“：”c_结构“，”说明“：”c中的数据结构集合“，”HTML_url“：”https://github.com/contip/c_structures，“语言”：[“C”]}，{“名称”：“masm_io_过程”，“说明”：“x86汇编中字符串到int和int到字符串的低级实现”，“html_url”：https://github.com/contip/masm_io_procedures“，“语言”：[“汇编”]}]

上述函数中的项目数组用于通过以下方式生成项目列表：

导出默认函数GitHubListDisplay（{projects}）{
让listItems=[]；
console.log（项目）；
if（Array.isArray（项目））{
projects.forEach（（项目，索引）=>{
listItems.push(
{project.name}
{project.description}
{水平列表（project.languages）}
);
});
}
返回{listItems}；
}

最后，它全部由这个函数控制：

导出默认函数GitHubPopUp（{userName}）{
const[projectData，setProjectData]=useState（[]）；
useffect（（）=>{
异步函数fetchData（）{
setProjectData（等待GitHubFetch（{userName}））；
log（“我获取的项目数据是：”，projectData）；
}
fetchData（）；
}, []);
返回(
0&

在呈现GitHubListDisplay组件之前，console.logging输入

projects

属性总是导致未定义。该函数永远不会显示任何内容

---

有人能帮忙吗？我花了好几个小时试图弄明白这一点。你不能按照你的意愿使用

forEach

异步等待。只需使用一个现代的

for…of

循环，等待将按照你的预期工作

指

---

---

然而，最好的做法是使用您不能按照您的意愿将

forEach

用于

异步等待

。只需使用一个现代的

for…of

循环，等待将按照您的预期工作

指

---

但是，最佳做法是使用

导出默认函数GitHubPopUp（{userName}）{
const[projectData，setProjectData]=useState（[]）；
useffect（（）=>{
异步函数fetchData（）{
setProjectData（等待GitHubFetch（{userName}））；
}
fetchData（）；
}, []);
useffect（（）=>{
log（“我获取的项目数据是：”，projectData）；
}，[项目数据]；
返回(

导出默认函数GitHubPopUp（{userName}）{
const[projectData，setProjectData]=useState（[]）；
useffect（（）=>{
异步函数fetchData（）{
setProjectData（等待GitHubFetch（{userName}））；
}
fetchData（）；
}, []);
useffect（（）=>{
log（“我获取的项目数据是：”，projectData）；
}，[项目数据]；
返回(
forEach中使用的“await”永远不会阻止主线程，并且会执行return语句。因此，“GitHubFetch”函数始终返回空数组。请使用promise.all（）正如William所指出的，forEach中使用的'await'永远不会阻塞主线程，并且会执行return语句。因此，您的'GitHubFetch'函数始终返回空数组。使用promise.all（）正如William所指出的，不幸的是，使用for…of方法以及作为Promise.all的替代方法提供的Array.prototype.reduce方法仍然没有定义/相同的行为。我确信这也会起作用：（你能用using for…of更新你的问题吗？并附上returnArray valueupdated.。我也尝试过使用promise.all，但结果相同。虽然我不确定是否正确使用了它。我发现了问题，请将用户名依赖项添加到use effectuseEffect（（）=>{…}，[用户名]）；不幸的是，使用for…of方法以及作为Promise.all的替代方法提供的Array.prototype.reduce方法仍然未定义/相同的行为。所有这些都来自同一线程。我确信这也会起作用：（你能用using for…of更新你的问题吗？并附上returnArray valueupdated.。我也尝试过使用promise.all，但结果相同。虽然我不确定是否正确使用了它。我发现了问题，请将用户名依赖项添加到use effectuseEffect（（）=>{…}，[用户名]）；这适用于console.logging the projectData，但仍无法将其传递到组件..总是这样未定义的pass projectData这适用于console.logging the projectData，但仍无法将其传递到组件..总是这样未定义的pass projectData
the project data i fetched is:  []