如何解决无法获得{data.allFile.edges.map{node}}来使用Gatsby + GraphQL渲染多个图像 复制步骤预期结果实际结果环境
说明
我正在尝试使用{data.allFile.edges.map(({ node })将多个（本地）图像渲染到页面上，但是我无法成功运行gatsby develop。
复制步骤
我的代码如下：
import React from "react"
import WideGalleryLayout from "../components/wide-gallery-layout"
import Img from "gatsby-image"
import { useStaticQuery,graphql } from "gatsby"
import { css } from "@emotion/core"
export default () => {
const data = useStaticQuery(graphql`
query imageQuery {
allFile(
filter: {
extension: { regex: "/(jpg)/" }
relativeDirectory: { eq: "images/japan" }
}
) {
edges {
node {
base
childImageSharp {
fluid {
aspectRatio
base64
src
srcSet
sizes
}
}
}
}
}
}
`)
return (
<WideGalleryLayout>
{data.allFile.edges.map(({ node })
=> (
<Img fluid=
{node.childImageSharp.fluid}
/>
))}
</WideGalleryLayout>
)
}
运行gatsby develop时，出现以下错误消息：
success open and validate gatsby-configs - 0.036s
success load plugins - 1.219s
success onPreInit - 0.003s
success initialize cache - 0.005s
success copy gatsby files - 0.055s
success onPreBootstrap - 0.015s
success createSchemaCustomization - 0.008s
success source and transform nodes - 0.369s
success building schema - 0.241s
success createPages - 0.037s
success createPagesStatefully - 0.075s
success updating schema - 0.022s
success onPreExtractQueries - 0.002s
ERROR #85911 GRAPHQL
There was a problem parsing "/Users/oliverholms/Dropbox/omh-blog/src/components/japan-component.js"; any GraphQL
fragments or queries in this file were not processed.
This may indicate a syntax error in the code,or it may be a file type
that Gatsby does not know how to parse.
File: src/components/japan-component.js
ERROR #85911 GRAPHQL
There was a problem parsing "/Users/oliverholms/Dropbox/omh-blog/src/pages/folio-1.js"; any GraphQL
fragments or queries in this file were not processed.
This may indicate a syntax error in the code,or it may be a file type
that Gatsby does not know how to parse.
File: src/pages/folio-1.js
failed extract queries from components - 0.314s
success write out redirect data - 0.010s
success onPostBootstrap - 0.002s
info bootstrap finished - 5.465s
success run page queries - 0.021s - 4/4 189.04/s
success write out requires - 0.004s
warn ESLintError:
/Users/oliverholms/Dropbox/omh-blog/src/components/layout.js
3:26 warning 'Link' is defined but never used no-unused-vars
8:9 warning 'data' is assigned a value but never used no-unused-vars
✖ 2 problems (0 errors,2 warnings)
warn ESLintError:
/Users/oliverholms/Dropbox/omh-blog/src/pages/folio-2.js
3:10 warning 'Image' is defined but never used no-unused-vars
✖ 1 problem (0 errors,1 warning)
warn ESLintError:
/Users/oliverholms/Dropbox/omh-blog/src/pages/folio-3.js
3:10 warning 'Image' is defined but never used no-unused-vars
✖ 1 problem (0 errors,1 warning)
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
/Users/oliverholms/Dropbox/omh-blog/src/pages/folio-1.js
39:7 error Parsing error: Unexpected token,expected ","
37 | <WideGalleryLayout>
38 | {data.allFile.edges.map(({ node })
> 39 | => (
| ^
40 | <Img fluid=
41 | {node.childImageSharp.fluid}
42 | />
✖ 1 problem (1 error,0 warnings)
File: src/pages/folio-1.js
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
/Users/oliverholms/Dropbox/omh-blog/src/pages/folio-1.js: Unexpected token," (39:6)
37 | <WideGalleryLayout>
38 | {data.allFile.edges.map(({ node })
> 39 | => (
| ^
40 | <Img fluid=
41 | {node.childImageSharp.fluid}
42 | />
File: src/pages/folio-1.js:39:6
failed Building development bundle - 3.355s
warn ESLintError:
/Users/oliverholms/Dropbox/omh-blog/src/components/layout.js
3:26 warning 'Link' is defined but never used no-unused-vars
8:9 warning 'data' is assigned a value but never used no-unused-vars
✖ 2 problems (0 errors," (39:6)
37 | <WideGalleryLayout>
38 | {data.allFile.edges.map(({ node })
> 39 | => (
| ^
40 | <Img fluid=
41 | {node.childImageSharp.fluid}
42 | />
File: src/pages/folio-1.js:39:6
failed Re-building development bundle - 0.083s
ERROR #98123 WEBPACK
我正在按照这个笨蛋视频Add multiple images from a directory with gatsby-image中的步骤进行操作。我有99％的把握可以正确复制他的代码-使用文件的正确目录，但是CLI无法成功develop。
预期结果
我应该能够使用gatsby-image从目录中渲染多个图像。我已经在http：// localhost：8000 / ___ graphql处进行了检查，并且我的graphQL查询返回了我的图像以及我请求的其他数据。
实际结果
我无法成功gatsby develop或渲染图像。终端错误消息指出箭头功能是问题元素（“预期逗号”等）。
我对此并不陌生，因此请在您的回答中将此列为技术语言。
环境
System:
OS: macOS 10.15.5
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.1 - /usr/local/bin/node
npm: 6.14.5 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 84.0.4147.125
Safari: 13.1.1
npmPackages:
gatsby: ^2.23.12 => 2.23.12
gatsby-image: ^2.4.16 => 2.4.16
gatsby-plugin-emotion: ^4.3.10 => 4.3.10
gatsby-plugin-sharp: ^2.6.27 => 2.6.27
gatsby-plugin-typography: ^2.5.10 => 2.5.10
gatsby-source-filesystem: ^2.3.23 => 2.3.23
gatsby-transformer-json: ^2.4.11 => 2.4.11
gatsby-transformer-remark: ^2.8.27 => 2.8.27
gatsby-transformer-sharp: ^2.5.13 => 2.5.13
npmGlobalPackages:
gatsby-cli: 2.12.87
解决方法
我建议您尝试像下面这样编码
{data.launches &&
data.launches.launches &&
data.launches.launches.map((launch: any) => (
<LaunchTile key={launch.id} launch={launch} />
))}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。