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} />
        })}

如何迭代React JS中对象内部的数组

我期待发生什么

究竟发生了什么

3 个答案: