javascript - 如何遍历 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 的 React 组件使用 Prop :

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/' )。

有人能解释一下我哪里出错了吗？

Link to 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>