Question

我是本机反应的新手，想循环通过嵌套对象。我创建了一个名为“ spots.js”的文件，如下所示：

export {spots};

var spots = [
  {
    name: 'Barberistas',
    location: 'Geleen',
    img_url: require('../assets/snipes/coffeesnipe-barberistas.jpg'),
    isFavourite: false,
    imagesReviews:{
      img1: require('../assets/snipes/coffeesnipe-barberistas.jpg'),
      img2: require('../assets/snipes/coffeesnipe-barberistas.jpg'),
      img3: require('../assets/snipes/coffeesnipe-barberistas.jpg'),
    }
  },
]

现在，我正在尝试显示imagesReviews的“点”中的图像。我知道我如何循环通过一个对象，但是我被这个嵌套对象卡住了。目前我有这个：

<ScrollView horizontal={true}> 
  {
    spots.map((l) => {
      return <Image source={ l.imagesReviews }></Image>

    })
  } 
</ScrollView>

结构截图： enter image description here

有人可以帮助我在此滚动视图中显示那些图片吗？我以正确的方式导入了所有内容，我唯一的问题是如何循环通过嵌套对象并仅显示imagesReviews？

Answer 1

您可以使用Object.keys()遍历内部对象。

您可以这样做

{
  spots.map((l) => {
    //It might be possible that not every object in spots array has imagesReviews object. 
    //Just put a check that every node in spots array contains imagesReviews object and then only show Image

    if(l.imagesReviews){
       return Object.keys(l.imagesReviews).map(key => <Image source={ l.imagesReviews[key] }></Image>)
    }
  })
}

循环嵌套对象反应本机

1 个答案: