如何遍历 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/']
  }
]

我想使用 props 将 images 数组中的每个图像分配给一个名为 CarrouselItem 的 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/'）。

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

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>

Answer 2

它只给你一个项目的原因是因为你正在映射一个厨师而不是他的图像。所以你只迭代一次。相反，您只想像chefs.images.map

那样映射图像

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() {
    const elems = [];
    chefs.forEach( (chef) => {
        chef && chef.images.forEach( (image, j) => {
            elems.push(<CarrouselItem imageUrl={image} key={i} />)
        })
    })
    return (
      <div>
        <h4>Slide image</h4>
        {elems}
      </div>
    )
  }
}

我建议您制作一个厨师组件，它可以呈现厨师信息、姓名、年龄、位置、餐厅...等内容，并为每个厨师提供带有图像的轮播。

Answer 3

实际上它的主厨对象索引是一个，所以你首先使用chefs.images.map

{chefs[0].images.map((image, index) => {
          return <CarrouselItem imageUrl={image} />
        })}