Question

我遇到了这个问题，不确定什么地方出问题了。我是盖茨比的新手。

我正在尝试从JSON文件创建页面。我不断收到此错误

TypeError：无法读取未定义的属性“ Layout”

这是JSON数据和代码：

JSON文件

{
    "Header" : {
        "TopMenu" : [
            {
                "url" : "/log-in",
                "name" : "Log in",
                "target" : "_self"
            },
            {
                "url" : "/about",
                "name" : "About",
                "target" : "_self"
            }
        ],
        "MainMenu" : [
            {
                "url" : "/",
                "name" : "Home",
                "target" : "_self"
            },
            {
                "url" : "/service",
                "name" : "Service",
                "target" : "_self"
            }
        ]
    },
    "Footer" : {
        "Links" : [
            {
                "url" : "/",
                "name" : "Home",
                "target" : "_self"
            },
            {
                "url" : "/service",
                "name" : "Service",
                "target" : "_self"
            },
            {
                "url" : "/blog",
                "name" : "Blog",
                "target" : "_self"
            }
        ]
    },
    "pages" : [
        {
            "name" : "Home",
            "content" : "This is the home page.",
            "url" : "/"
        },
        {
            "name" : "About",
            "content" : "This is the about page.",
            "url" : "/about"
        },
        {
            "name" : "Service",
            "content" : "This is the service page.",
            "url" : "/service"
        },
        {
            "name" : "Blog",
            "content" : "This is the blog page.",
            "url" : "/blog"
        }
    ]
}

gatsby-node.js

exports.createPages = ({actions}) => {
    const {createPage} = actions
    const pageData = JSON.parse(fs.readFileSync('./content/data.json', { encoding: 'utf-8' }));
    const pageTemplate = path.resolve('src/templates/page.js');

    pageData.pages.forEach(page => {
        createPage({
          path: page.url,
          component: pageTemplate,
          context: {
            Layout : {
                Header : pageData.Header,
                Footer : pageData.Footer
            },
            ...page,
          }
        });
      });
}

src / template / page.js

import React from "react"
 const Page = props => {
    const { Layout = null, name = null, content = null, url = null } = props.PageContext;

    return (
      <React.Fragment>
        <MainLayout headerLayout={Layout.Header} footerLayout={Layout.Footer}>
            {content}
        </MainLayout>
      </React.Fragment>
    );
  };

export default Page;

gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        //icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    }
  ]
}

编辑： 添加了gatsby-config.js

非常感谢您的帮助。

Answer 1

您那里有错字。在src/template/page.js中，它应该是props.pageContext而不是props.PageContext。 PageContext未定义，因此类型错误。

    const {
      Layout = null,
      name = null
      content = null,
      url = null 
-   } = props.PageContext;
+   } = props.pageContext;

TypeError无法读取未定义的属性-Gatsby

1 个答案: