不起作用的数组上的Map函数
不起作用的数组上的Map函数
提问于 2022-09-17 06:09:53
我是ReactJS的新手。不知怎么的，我无法使用数组上的地图获得适当的输出。
我有一个叫宠物的数组。
const pets = [{
name: 'Bruno',
type: 'Dog',
description: 'Bruno is funny and lovable',
skills: ['fetch', 'being cute', 'roll over'],
image: 'https://www.dogbreedinfo.com/images17/LabmaranerCasey6Weeks1.JPG'
},
{
name: 'Rocky',
type: 'Dog',
description: 'Rocky is funny and lovable',
skills: ['bite', 'being cute', 'roll over'],
image: 'https://st.depositphotos.com/1000291/3041/i/950/depositphotos_30415145-stock-photo-white-labrador-puppy.jpg'
}];我试着用下面的地图来显示。
<div>
<h1>My pets</h1>
<ul>
{
pets.map((pet, index) => {
<li key={index}>
<h1> {pet.name} </h1>
</li>
})
}
</ul>
</div>这样做并不显示来自数组的任何数据。
我的密码怎么了，有人能告诉我吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2022-09-17 06:16:42
是的，你忘了返回，你可以检查这里隐含的还是显式的返回
您正在执行显式返回，因此需要自己编写return关键字.作为
{
pets.map((pet, index) => {
return(<li key={index}>
<h1> {pet.name} </h1>
</li>)
})
}或者向下面的隐式转换：
{
pets.map((pet, index) =>(
<li key={index}>
<h1> {pet.name} </h1>
</li>
)
)
}Stack Overflow用户
发布于 2022-09-17 06:28:50
你只需要添加一个返回关键字，快乐学习:)
<div>
<h1>My pets</h1>
<ul>
{
pets.map((pet, index) => {
return <li key={index}>
<h1> {pet.name} </h1>
</li>
})
}
</ul>
</div>Stack Overflow用户
发布于 2022-09-17 06:33:21
您应该在li标记中使用返回项，或者移除大括号。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73752536
复制相关文章
相似问题
腾讯云开发者
