操作get（this.props'data'）的数据输出(Manipulate data output from get(this.props 'data'))

我使用ReactJS和GatsbyJS以及使用GraphQL从Contentful中提取的数据 。

获取数据是可以的，但是在这种情况下，使用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" } } ] } } }

但我怎么操纵这些数据，以便我可以使用其中的图像

如

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，但是它在控制台中返回undefined并且TypeError: Cannot read property 'src' of undefined页面TypeError: Cannot read property 'src' of undefined 。宽度和高度，零的想法。

I am using ReactJS and GatsbyJS with data pulled from Contentful using GraphQL.

Getting the data is okay but on this occasion, using the react-photo-gallery (Github) the data pulled does not match requirements.

Here is an example of the GraphQL Query

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

And by defining the data

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

I get a JSON response of

{ "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" } } ] } } }

But how can I manipulate this data so that I can use the images within

as

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" } ]

I though that I could get the src by {summerGallery.sizes.src} but it returns undefined in the console and a TypeError: Cannot read property 'src' of undefined on page. The width and height, zero idea.