我将如何使用useEffect创建一个组件?
useEffect(() => {
fetch('https://website')
.then((res) => res.json())
.then((data) => {
setData(data)
// Use fetched data to create object "roles"
let cards = roles.map((path) => (
<Box m="sm" pt="xl">
<Card key={path.id} p="lg" radius="md href="#"
onClick={ () => handlePopup(path.role) }>
</Card>
</Box>
));
})
}
return (
<>
{cards} // this doesn't work.
</>
)
当前代码不起作用。“卡”没有加载,只是得到一个空白区域。我把它都保留在获取中,因为数据是相关的,我不知道如何分割它。不知道是否有一个更聪明的方法。
2条答案
按热度按时间qvsjd97n1#
您可以在
useEffect
之外Map状态变量如果要将它们存储在单独的变量中,可以在
useEffect
之外对其进行设置,以便可以访问它。正如评论中提到的,Map元素时还需要设置唯一的
key
。du7egjpx2#
您应该存储(
useState
)来自fetch
调用的原始JS对象数组(结果),而不是构造呈现的DOM。key
应该出现在Array.prototype.map
调用的每个直接元素上。在下面的例子中,<Grid>
Package 器接收这个属性。**注意:**由于与
id
关联的role
可能会随时间而更改,因此id
甚至index
可能不够唯一。您可以对对象进行哈希以接收真正唯一的ID,或者您可以生成UUID。