如何在单个渲染中使用嵌套映射获取数据?

时间:2018-02-12 07:43:26

标签: javascript arrays json reactjs ecmascript-6

我正在尝试打印下面给出的数据。enter image description here。我在渲染中使用了嵌套映射,其中第一个映射是打印类别名称和链接视图all。而在第二个/嵌套映射我试图遍历属于父映射中列出的类别的数据。 但我收到的错误为unexpected token at nested return。  enter image description here

在FeaturedSection.js中渲染函数

  <div className="data-container">
    <div  className="row mx-0">
      {this.state.newData && Object.keys(groupedByCategory).map(function(categoryName,i)
        {return(
          <div key={i}  className="row mx-0">
              <div className="col-sm-10 col-md-10 col-lg-10 lrPadding">
                <h3 className="featureTitle">Featured {`${categoryName}`}</h3>
              </div>
              <div className="col-sm-2 col-md-2 col-lg-2 lrPadding">
                <Link to="#" className="routeDecorator ">
                <h5 className="featureTitle float-right mt-3">View All
                 <i className="fa fa-angle-right font-weight-bold px-1" aria-hidden="true"></i>
                </h5>
                </Link>
              </div>
              groupedByCategory[categoryName].map(function(data,i)
                {
                  return (

                        <FeaturedOffer
                          title={data.name}
                          offerDescription={data.offerdescription}
                          rewardImage={data.reward_image}
                          productName={data.modelname}
                          thumbnailImage={data.thumbnailimage}
                        />
                );
              })
          </div>
        );})}
    </div>
  </div>

1 个答案:

答案 0 :(得分:0)

我认为您需要将地图包装在{}内。

{ 
  groupedByCategory[categoryName].map((data,i) => {(
    <FeaturedOffer
      key={i}
      title={data.name}
      offerDescription={data.offerdescription}
      rewardImage={data.reward_image}
      productName={data.modelname}
      thumbnailImage={data.thumbnailimage}
    />
  })
}