react等待数组内的async函数组件

Question

我正在尝试使用异步功能组件动态创建内容。然而，我遇到了能够渲染它的问题。基本上，我有一个异步调用来查找不同类别的数量。，然后为类别内的每个项目创建ItemCards。

我调用后端服务器来获取不同的类别并将它们存储在数组中。然后处理ItemCards。

我在某处读到它可能与承诺有关;所以我试过使用react hooks (useEffect())，但它仍然不能与Promise.all一起工作。此外，我试着从ItemCard函数中删除async和await，它似乎有效。

下面是获取不同项目类别的代码:

async GetProjectCategories(){
await axios.get("http://backend.com/category")
.then(async (res) => {
var result = [];
for (var resdata of res.data) {
result.push(
<div key = {"category:"+resdata._id}>
<h3>resdata.catName</h3>
<ItemCards data = {resdata}/>
</div>
);
}

this.setState({Categories: result});

return;
})
}

下面是生成不同物品卡的代码:

async function ItemCards(props){
console.log(props.data);
var link = "http://backend.com/item/"+props.data.catLink;
useEffect(()=>{
await axios.post(link, {})
.then((res)=>{

})
},[])

return (<h1>why is it not working</h1>)
}

有人知道如何解决这个问题吗?非常感谢您的宝贵时间

Answer 1

为什么你不应该在获取resdata时将其存储在状态数组中，并根据状态的变化将ItemCards与异步函数GetProjectCategories分开呈现