描述
我正在尝试使用{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, expected "," (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, 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, expected "," (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
我按照这个蛋头视频中的步骤添加来自gatsby图像目录的多个图像。我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
除了Sena的注释，您还可以将代码缩短为
{data?.launches?.launches?.map((launch: any) => (
<LaunchTile key={launch.id} launch={launch} />
))}
我建议您在下面尝试这样的编码
{data.launches &&
data.launches.launches &&
data.launches.launches.map((launch: any) => (
<LaunchTile key={launch.id} launch={launch} />
))}
参考网址：https://www.pollographql.com/docs/tutorial/queries/