如何在单次渲染中使用嵌套地图获取数据？

Question

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

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>

Answer 1

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

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