操作 get(this.props 'data') 的数据输出

Question

我正在使用 ReactJS 和 GatsbyJS，数据来自 Contentful 使用 GraphQL.

拉取数据还可以，但是这次使用react-photo-gallery(Github)拉取的数据不符合要求

这是 GraphQL 查询的示例

query galleryQuery($slug: String!) {
   contentfulImageGallery(slug: {eq: $slug}) {
      summerGallery {
         sizes(maxWidth: 1500) {
            ...GatsbyContentfulSizes_withWebp_noBase64
         }
      }
   }
}

并通过定义数据

const summerGallery = get(this.props, 'data.contentfulImageGallery')

我收到 JSON 的回复

{
 "data": {
    "contentfulImageGallery": {
      "summerGallery": [
        {
          "sizes": {
            "aspectRatio": 1.7779433681073025,
            "sizes": "(max-width: 1500px) 100vw, 1500px",
            "src": "http://example.com/example/img1.jpg?w=1500&q=50"
          }
        },
        {
          "sizes": {
            "aspectRatio": 1.7779433681073025,
            "sizes": "(max-width: 1500px) 100vw, 1500px",
            "src": "http://example.com/example/img2.jpg?w=1500&q=50"
          }
        }
      ]
    }
  }
}

但是我如何操作这些数据才能使用

中的图像

<Gallery photos={summerGallery}/>

为

const summerGallery = [
  {
    src: 'http://example.com/example/img1.jpg'
    width: "NEED WIDTH"
    height: "NEED HEIGHT"
  },
  {
    src: 'http://example.com/example/img2.jpg'
    width: "NEED WIDTH"
    height: "NEED HEIGHT"
  }
]

虽然我可以通过 {summerGallery.sizes.src} 获取 src，但它在控制台中 returns undefined 和页面上的 TypeError: Cannot read property 'src' of undefined 。宽高，零想法。

Answer 1

summerGallery.sizes.src 未定义，因为 summerGallery 是一个没有 sizes 属性.

的数组

您可以map将summerGallery数组转换为所需的格式：

const mappedDataArray = summerGallery.map(g => {
  return {
    src: g.sizes.src,
    width: '100vw',
    height: '1500px',
  }
})

操作 get(this.props 'data') 的数据输出

Manipulate data output from get(this.props 'data')

javascript

reactjs

graphql

gatsby