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

假设我有一个这样的对象数组：

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组件：

class CarrouselItem extends React.Component {
  render() {

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

我期望会发生什么 在这种情况下，map函数应该迭代所有对象，其中只有一个对象，然后创建X个CarrouselItem组件，每个组件都有一个从images数组中获取的元素

到底发生了什么 不幸的是，在这种情况下，我只得到数组中的第一项，'http://lorempixel.com/400/400/sports/'.

有人能解释一下我的错在哪里吗

---

之所以它只给你一个项目，是因为你映射的是厨师，而不是他的图像。。所以你只需要迭代一次。相反，您只需要像chefs.images.map那样映射图像

---

我建议您制作一个chef组件，用于呈现厨师信息、姓名、年龄、位置、餐厅等内容。。。等并为每个厨师的图像呈现一个旋转木马。

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

---

我建议您制作一个chef组件，用于呈现厨师信息、姓名、年龄、位置、餐厅等内容。。。等并为每个厨师及其图像呈现一个旋转木马。

实际上是其picking chef对象索引，该索引是一个，因此您首先使用chefs.images.map

---

实际上，它的picking chef对象索引是一个，所以您首先使用chefs.images.map

---

首先，您需要迭代chefs数组，然后是单个图像

康斯特厨师=[ { 重点:1,， 图片：['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/'] } ] 类Carrousel扩展了React.Component{ 渲染{ 回来 幻灯片图像 {chefs.mapchef，i=> {chef.images.mapimage，索引=> } } } } 类CarrouselItem扩展了React.Component{ 渲染{ 回来 } } ReactDOM.render，document.getElementByIdapp

---

首先，您需要迭代chefs数组，然后是单个图像

康斯特厨师=[ { 重点:1,， 图片：['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/'] } ] 类Carrousel扩展了React.Component{ 渲染{ 回来 幻灯片图像 {chefs.mapchef，i=> {chef.images.mapimage，索引=> } } } } 类CarrouselItem扩展了React.Component{ 渲染{ 回来 } } ReactDOM.render，document.getElementByIdapp

---

这是一个快速的回答，谢谢！尽管这是我之前所想的，尽管每当我尝试映射chefs.images时，它都会返回TypeError:undefined不是一个计算'chefs.images.map'的对象。@A7DC听起来好像你在某处有一些无效数据。我会在一秒钟内回答这个问题edit@JohnRuddell他不需要迭代chefs数组来获得单独的chef元素吗？谢谢，伙计，你是个传奇人物。我不确定哪一个是你的答案还是anuragasaurus的答案更好，所以我将暂时把他的答案作为正确答案，直到其他人对这两个评论都进行了审核。但再次感谢你，伙计！我真的很感激@A7DC不用担心：我个人喜欢我的答案，因为它更具可读性，但这两个答案都是完全可以接受的：我还添加了一个建议，说明我将如何更好地展示数据：这是一个快速的答复，谢谢！尽管这是我之前所想的，尽管每当我尝试映射chefs.images时，它都会返回TypeError:undefined不是一个计算'chefs.images.map'的对象。@A7DC听起来好像你在某处有一些无效数据。我会在一秒钟内回答这个问题edit@JohnRuddell他不需要迭代chefs数组来获得单独的chef元素吗？谢谢，伙计，你是个传奇人物。我不确定哪一个是你的答案还是anuragasaurus的答案更好，所以我将暂时把他的答案作为正确答案，直到其他人对这两个评论都进行了审核。但再次感谢你，伙计！我真的很感激@A7DC不用担心：我个人喜欢我的答案，因为它更具可读性，但这两个答案都是完全可以接受的：我还添加了一个建议，说明如何更好地布局数据：正如上面的评论：每当我尝试映射chefs.images时，它都会返回TypeError:undefined不是一个评估“chefs.imag”的对象

---

“地图”。不知道为什么会这样？谢谢你的回复！您可以使用子索引chefs[0]您是对的，但不幸的是，如果将多个chef添加到chefs数组中，这会中断，对吗？与上面的注释一样：每当我尝试映射chefs.images时，它都返回TypeError:undefined不是一个计算“chefs.images.map”的对象。不知道为什么会这样？谢谢你的回复！你可以使用子索引厨师（0）你是对的，但不幸的是如果一个以上的厨师被添加到厨师的行列中，这会坏掉，对吧？谢谢Aururaasuru，我确实考虑过这样做，虽然我不知道为什么，但对我来说这只是一个坏习惯。虽然它现在还有效，所以谢谢你！如果可以，我会选择这个作为正确答案，如果有更好的解决方案，我会修改它。再次感谢@为什么你觉得这是一种不好的做法？你的厨师数组有一个图像数组，所以你需要迭代两次。好的，太棒了。我不确定，只是当我想到这样做的时候，它看起来很冗长，我想会有一种更简洁的方法来做——但似乎不是因为你们两个提出了类似的解决方案。再次感谢你！谢谢AuraGasaLUS，我确实考虑过这样做，虽然我不知道为什么，但对我来说这只是一个坏习惯。虽然它现在还有效，所以谢谢你！如果可以，我会选择这个作为正确答案，如果有更好的解决方案，我会修改它。再次感谢@为什么你觉得这是一种不好的做法？你的厨师数组有一个图像数组，所以你需要迭代两次。好的，太棒了。我不确定，只是当我想到这样做的时候，它看起来很冗长，我想会有一种更简洁的方法来做——但似乎不是因为你们两个提出了类似的解决方案。再次感谢你！

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

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

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