如何映射嵌套的对象数组？

Question

所以我的问题是，我正在使用 Sanity.io 来管理插画家作品集页面中的内容。

我正在尝试访问我在插画家所做的每个项目中放入的图片库。

我的数据是这样嵌套的：

data structure I'm trying to access

我正在尝试这样访问它：

{data.sanityProject.gallery.images.map((image) => (
            <SwiperSlide key={image.id}>
              <GatsbyImage
                image={image.asset.gatsbyImageData}
                // alt={image.image.title}
              />
            </SwiperSlide>
...

产生的错误信息是这样的：

Cannot read property 'gatsbyImageData' of undefined
<SwiperSlide key={image.id}>
  138 |               <GatsbyImage
> 139 |                 image={image.asset.gatsbyImageData}
      |                                   ^
  140 |                 // alt={image.title}
  141 |               />
  142 |             </SwiperSlide>

我知道这种方法很接近，但是是错误的。我不知道如何解决这个问题。我还是新开发人员，我非常清楚这可能是我所缺少的非常简单的东西，但我只是不知道在哪里寻找答案。

任何帮助都将不胜感激，也将作为学习经验获得。

照顾好大家。

Answer 1

images 是这个形状的对象数组：

{
   image: {
      id: ...,
      asset: ...,
      // etc.
   }
}

因此，为了正确访问它们，您应该稍微更改代码：

{data.sanityProject.gallery.images.map((imageItem) => (
            <SwiperSlide key={imageItem.image.id}>
              <GatsbyImage
                image={imageItem.image.asset.gatsbyImageData}
                // alt={image.image.title}
              />
            </SwiperSlide>

您可以选择更简洁（但更高级）的语法 (Destructuring)：

{data.sanityProject.gallery.images.map(({image}) => (
            <SwiperSlide key={image.id}>
              <GatsbyImage
                image={image.asset.gatsbyImageData}
                // alt={image.image.title}
              />
            </SwiperSlide>