Dictionary 我试图映射一个数组,并在数组中找到对象的索引

Dictionary 我试图映射一个数组,并在数组中找到对象的索引,dictionary,reactjs,jsx,react-bootstrap,Dictionary,Reactjs,Jsx,React Bootstrap,我有一个组件,我想在对象数组中查找索引(现在我有一个硬编码的对象数组,但稍后将使用调用来获取数据)。我想在数组的每五个位置添加一个mdOffset 2。我该怎么做呢?我的代码: export default class Winks extends Component { constructor () { super() this.state ={ items: [ { id:1, name: "The Kooples - white top", u

我有一个组件,我想在对象数组中查找索引(现在我有一个硬编码的对象数组,但稍后将使用调用来获取数据)。我想在数组的每五个位置添加一个mdOffset 2。我该怎么做呢?我的代码:

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>
    )
  }
}
导出默认类Winks扩展组件{
构造函数(){
超级()
这个州={
项目:[
{id:1,名称:“The Kooples-white top”,url:“bloomingdales.com”,src:“assets/male.png”},
{id:2,名称:“Sandro Orange Zipper”,url:“saksfifth.com”,src:“assets/female.png”},
{id:3,名称:“Sandro Orange Zipper”,url:“saksfifth.com”,src:“assets/female.png”},
{id:4,名称:“Sandro Orange Zipper”,url:“saksfifth.com”,src:“assets/female.png”},
{id:1,名称:“Sandro Orange Zipper”,url:“saksfifth.com”,src:“assets/female.png”},
{id:1,名称:“The Kooples-dress”,url:“bloomingdales.com”,src:“assets/male.png”},
{id:1,名称:“The Kooples-dress”,url:“bloomingdales.com”,src:“assets/male.png”},
]
}
}
渲染(){
var listItems=this.state.items.map.bind(this)(函数(项){
if(this.state.items.indexOf(item)%5==0){
变量列=(
{item.name}
)
}
否则{
变量列=(
{item.name}
)
}
返回列
});
返回(
{listItems}
)
}
}

映射时,您会得到元素的索引作为第二个参数

例:

arr.map(功能(项目、索引){
});

如果他希望每五个元素中就有一个元素,那么索引从0开始,这不是应该减少一个吗
[1,2,3,4,5].forEach(函数(项,索引){if(索引%5==0){console.log(项)}}
将记录的唯一项是第一个索引,因为0%任何内容都是0,第五个项的索引都是4,因此不会传递条件nice one是的,我检查了这一点,我想我可能用词有误,但Emanual提供的东西对我起了作用,我基本上希望数组中的第6个索引或第5个项目做点什么。[1,2,3,4,5,6].forEach(函数(项,索引){if(索引%5==0){console.log(项)})它吐出0和6,这是我想要的。一行5个项目,第6个项目开始新的一行
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>
});