2016-11-18 43 views
-1

我想跳过在.map功能我现在要做的第一件是这样的:如何先跳过地图功能

return (
    <div className="gallery clearfix"> 
    <div className="gallery-image"> 
     <img src={block.gallery[0].images.thumbnail_sm} alt={block.title} srcSet={`${block.gallery[0].images.thumbnail_md} 1x, ${block.gallery[0].images.thumbnail_lg} 2x`} className="img-fluid" /> 
    </div> 
    <div className="gallery-thumbs"> 
     <div className="row"> 
     { block.gallery.slice(1).forEach((item, i) => (
      <div className="gallery-item" key={i}> 
      { block.gallery.length > 4 ? 
       <div className="inner"> 
       <img src={block.gallery[i].images.thumbnail_sm} alt={block.title} srcSet={`${block.gallery[i].images.thumbnail_md} 1x, ${block.gallery[i].images.thumbnail_lg} 2x`} className="img-fluid" title="" /> 
       <div className="img-overlay"> 
        <span className="img-overlay-body">{ block.gallery.length - 4 }+ <span className="hidden-xs">Foto's</span></span> 
       </div> 
       </div> 
       : 
       <img src="http://placehold.it/800x538" alt="" className="img-fluid" title="" /> 
      } 
      </div> 
     ))} 
     </div> 
    </div> 
    </div> 
); 

当你看到我展示第一张图中第一img标签,但它会也作为第一个在.map函数中显示,所以我得到了重复的图像。如何跳过.map函数中的第一个图像?

+0

为什么你使用'map'这里你不返回任何东西。为了循环数组,你可以使用'forEach'并跳过第一项,你可以检查'if(i> 0)' – Aruna

+0

@Aruna返回的是''div className =“gallery-item”>它包含。 –

+0

这将有助于更新你的问题,因为你的代码不再使用'.map' – Pineda

回答

8

所以slice它跳过第一

block.gallery.slice(1).map(...) 

您还需要引用该项目传递到地图,不使用与原单数组的索引。

block.gallery[i].images.thumbnail_sm 

应该

item.images.thumbnail_sm 
+0

当我这样做的时候仍然会显示第一张图片 – Sreinieren

+0

当你跳过带切片的第一个索引时为什么会显示第一张图片?你也需要摆脱里面的i == 0检查。 – epascarello

+0

已编辑的问题检查出来 – Sreinieren