如何在React JS中的对象内的数组上进行迭代

Question

想象一下，我有一个像这样的对象数组：

const chefs = [
  {
    key: 1,
    images: ['http://lorempixel.com/400/400/sports/', 'http://lorempixel.com/400/400/abstract/', 'http://lorempixel.com/400/400/animals/', 'http://lorempixel.com/400/400/city/', 'http://lorempixel.com/400/400/people/']
  }
]

我想将images数组中的每个图像分配给CarrouselItem使用props 调用的React组件：

class CarrouselItem extends React.Component {
  render() {

    return (
      <div>
        <img src={this.props.imageUrl} />
      </div>
    )
  }
}

然后将其放置在称为的父组件中Carrousel，在该对象上循环遍历该对象并返回内部的图像，以将其放置在该CarrouselItem组件内部：

class Carrousel extends React.Component {
  render() {
    return (
      <div>
        <h4>Slide image</h4>
        {chefs.map((chef, index) => {
          return <CarrouselItem imageUrl={chef.images[index]} />
        })}
      </div>
    )
  }
}

我期望发生什么

map函数应该遍历所有对象（在这种情况下，只是其中的一个），然后创建X个CarrouselItem组件，每个组件都<img>从images数组中获取一个。

实际发生了什么

不幸的是，我只得到数组中的第一项（在本例中为'http://lorempixel.com/400/400/sports/'）。

有人这么善良地解释我在哪里出问题了吗？

链接到CodePen。

Answer 1

首先，您需要遍历Chefs数组，然后遍历单个图像。

const chefs = [
  {
    key: 1,
    images: ['http://lorempixel.com/400/400/sports/', 'http://lorempixel.com/400/400/abstract/', 'http://lorempixel.com/400/400/animals/', 'http://lorempixel.com/400/400/city/', 'http://lorempixel.com/400/400/people/']
  }
]

class Carrousel extends React.Component {
  render() {
    return (
      <div>
        <h4>Slide image</h4>
        {chefs.map((chef, i)=>(
          <div key={i}>
            {chef.images.map((image,index)=>(
              <CarrouselItem imageUrl={image} key={index} />
            ))}
          </div>  
        ))}
        ))
      </div>
    )
  }
}

class CarrouselItem extends React.Component {
  render() {

    return (
      <div>
        <img src={this.props.imageUrl} />
      </div>
    )
  }
}

ReactDOM.render(<Carrousel />,document.getElementById("app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>