我正在尝试使用 map 函数从数组中填充数据。但是 id 没有获取。我使用"key"关键字，仍然得到未定义的id

Question

我刚开始尝试克隆亚马逊，但我收到了一个警告：列表中的每个孩子都应该有一个唯一的"键"；道具下面是我的代码

**这是我的数组页面**

const productData = [
{
id: 2,
Heading : 'Book ticket for essential travel',
img1 : aeroplane,
p1 : 'Flight tickets',
img2 : Essential,
p2 : 'Essentail Travel product',
img3 : Train,
p3 : 'Train tickets',
img4 : Bus,
p4 : 'Bus tickets'
},

**这是我使用地图功能的主页**

<div className="col-md-12">
<div className="row">
{ 
productData.map( (val) => 
{
return(
<div className="col-md-3">
<Product 
key = {val.id}
Heading = {val.Heading}
img1 = {val.img1}
p1 = {val.p1}
img2 = {val.img2}
p2 = {val.p2}
img3 = {val.img3}
p3 = {val.p3}
img4 = {val.img4}
p4 = {val.p4}
/>
</div>
)
} 
)
}
</div>
</div>

**这是我使用道具的产品页面**

<div className="product">
<h4>{props.Heading}</h4>
<div className="inner_product" id={props.id}>
<div className="">
<img src={props.img1}/>
<p>{props.p1}</p>
<img src={props.img2} className="mr-4"/>
<p>{props.p2}</p>
</div>
<div className="">
<img src={props.img3}/>
<p>{props.p3}</p>
<img src={props.img4}/>
<p>{props.p4}</p>
</div>
</div>
<button className="btn btn-warning" onClick={addToCart}>add to cart</button>
<a href="#" className="product_link float-right">Expand more</a>
</div>

Answer 1

key道具应分配给父组件。请参阅文档。

<div className="col-md-3" key={val.id}>
<Product ... >
</div>

完整示例：

<div className="col-md-12">
<div className="row">
{productData.map((val) => {
return (
<div className="col-md-3" key={val.id}>
<Product
Heading={val.Heading}
img1={val.img1}
p1={val.p1}
img2={val.img2}
p2={val.p2}
img3={val.img3}
p3={val.p3}
img4={val.img4}
p4={val.p4}
/>
</div>
);
})}
</div>
</div>;

Answer 2

密钥需要位于循环中的第一个元素

<div className="col-md-12">
<div className="row">
{ 
productData.map( (val) => 
{
return(
<div className="col-md-3" key={val.id}>
<Product 
Heading = {val.Heading}
img1 = {val.img1}
p1 = {val.p1}
img2 = {val.img2}
p2 = {val.p2}
img3 = {val.img3}
p3 = {val.p3}
img4 = {val.img4}
p4 = {val.p4}
/>
</div>
)
} 
)
}
</div>
</div>