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

我被这个问题困住了，我不确定出了什么问题。我对盖茨比不熟悉

我正在尝试从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,
          }
        });
      });
}

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;

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.
      },
    }
  ]
}

src/template/page.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,
          }
        });
      });
}

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;

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

---

非常感谢您的帮助。

您的输入有误。在

src/template/page.js

中，它应该是

props.pageContext

，而不是

props.pageContext

<代码>页面上下文未定义，因此类型错误

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

---

请添加

gatsby config.js

Hi@ksav我已经添加了gatsby配置。似乎我也有同样的问题Locohost在他的帖子在这里