时间戳

首页 > 解决方案 > 我正在尝试使用 map 函数从数组中获取数据。但是 id 没有获取。我使用'key'关键字，仍然有未定义的ID

reactjs - 我正在尝试使用 map 函数从数组中获取数据。但是 id 没有获取。我使用'key'关键字，仍然有未定义的ID

问题描述

我是新来的，试图克隆亚马逊，但我收到警告：列表中的每个孩子都应该有一个独特的“关键”道具。 下面是我的代码

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

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>

标签： reactjs

解决方案

keyprop 应该分配给父组件。请参阅文档。

<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>;

推荐阅读