2016-10-06 16 views
1

私はコンポーネントを持っていて、オブジェクトの配列内でインデックスを探したいと思います(今はオブジェクトのハードコードされた配列を持っていますが、データを取得する呼び出しを使用している)。配列の5番目ごとに2のmdOffsetを追加します。これをどうやってやるの?私のコード:配列をマップし、配列内のオブジェクトのインデックスを検索しようとしています

export default class Winks extends Component { 
    constructor() { 
    super() 
    this.state ={ 
     items: [ 
     { id:1, name: "The Kooples - white top", url:"bloomingdales.com", src: "assets/male.png" }, 
     { id:2, name: "Sandro-Orange Zipper", url:"saksfifth.com", src: "assets/female.png" }, 
     { id:3, name: "Sandro-Orange Zipper", url:"saksfifth.com", src: "assets/female.png" }, 
     { id:4, name: "Sandro-Orange Zipper", url:"saksfifth.com", src: "assets/female.png" }, 
     { id:1, name: "Sandro-Orange Zipper", url:"saksfifth.com", src: "assets/female.png" }, 
     { id:1, name: "The Kooples - dress", url:"bloomingdales.com", src: "assets/male.png" }, 
     { id:1, name: "The Kooples - dress", url:"bloomingdales.com", src: "assets/male.png" }, 
     ] 
    } 
    } 

    render() { 

    var listItems = this.state.items.map.bind(this)(function(item) { 
     if (this.state.items.indexOf(item) % 5 === 0) { 
     var columns = (
      <Col md={2} mdOffset={2}> 
       <img className='img-responsive' src={item.src}></img> 
      <Row> 
       <span>{item.name}</span> 
      </Row> 
      <Row className="pull-right"> 
       <i className="fa fa-heart"></i> 
      </Row> 
      </Col> 
     ) 
     } 

     else { 
     var columns = (
      <Col md={2}> 
       <img className='img-responsive' src={item.src}></img> 
      <Row> 
       <span>{item.name}</span> 
      </Row> 
      <Row className="pull-right"> 
       <i className="fa fa-heart"></i> 
      </Row> 
      </Col> 
     ) 
     } 

     return columns 
    }); 

    return (
     <Row> 
      {listItems} 
     </Row> 
    ) 
    } 
} 

答えて

2

あなたが2番目の引数としてhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

例の要素のインデックスを取得マップ:彼はすべての5番目の要素を望んでいる場合

arr.map(function(item, index) { 
    if (index % 5 === 0) { 
    // do your stuff here 
    } 
}); 

それとも

arr.map(function(item, index) { 
    <Col mdOffset={index % 5 === 0 ? 2 : null}> 

    </Col> 
}); 
+0

をインデックスは0から始まるので、これは1ではないでしょうか? {1,2,3,4,5} .forEach(function(item、index){if(index%5 === 0){console.log(item)}}) 'ログされる唯一の項目0%以来の最初のインデックスは何も0であり、5番目のアイテムは4のインデックスを持ち、したがって条件付きを通過しません – finalfreq

+0

いいえ1はい私はこれをチェックします – EQuimper

+1

私はそれが間違っているかもしれないと思いますが、Emanualが私のために働いた、私は本質的に配列の6番目のインデックスまたは5番目のアイテムが何かをしたいと思っています。 [1,2,3,4,5,6] .forEach(function(item、index){if(index%5 === 0){console.log(item)}})これは0と6を吐き出します。私が欲しかったものです。 5つの項目が連続して6番目の行が新しい行を始める –

関連する問題