数组上的Map函数在React中不起作用

Question

我是ReactJS的新手。不知怎的，我无法使用数组上的映射获得正确的输出。

我有一个名为pets的数组。

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>

这样做不会显示数组中的任何数据。

我的代码出了什么问题，有人能告诉我吗？

Answer 1

是的，您忘记返回了，您可以在这里检查隐式与显式返回

您正在进行显式返回，因此需要自己编写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>
)
)
}

Answer 2

您只需要添加一个return关键字，快乐学习：(

<div>
<h1>My pets</h1>
<ul>
{
pets.map((pet, index) => {  

return <li key={index}>
<h1> {pet.name} </h1>
</li>
})
}
</ul>

</div>

Answer 3

您应该使用return in li标记或删除大括号。

Answer 4

这样做。。。

<div><h1>My pets</h1>
<ul>
{
pets.map((pet, index) => (            
<li key={index}>
<h1> {pet.name} </h1>
</li>
))
}
</ul></div>