【问题标题】：Stuck at "Cannot read property 'props' of undefined"卡在“无法读取未定义的属性'props'”
【发布时间】：2020-01-08 12:37:39
【问题描述】：

我正在测试来自 Gatsby 的 gatsby-source-wordpress 插件，并且我正在尝试让我的菜单从我的 Wordpress 站点中获取链接。

我已经设法让所有的 Wordpress 模式都出现在 GraphiQL 中，并从那里复制了 GQL 代码。

我已经制作了一个 Layout 组件，我已经尽我所能让它工作。但是，当我将 Gatsby 站点部署到 localhost 时，我不断收到 TypeError: Cannot read property 'props' of undefined。

以前有人遇到过这种情况吗？我对 GraphQL 有点陌生，所以老实说，我不知道出了什么问题，或者是否是 GraphQL 导致了这种情况。任何帮助是极大的赞赏！ （对不起，如果这是一个非常简单的修复，我只是无知）

我搜索过 Google、Stack Overflow、Youtube 以及我能想到的任何其他地方。

代码

布局

import React, { Component } from "react";
import PropTypes from "prop-types";
import { StaticQuery, graphql } from "gatsby";
// import Image from "gatsby"

import Header from "../Header";
import MainMenu from "../Nav";
// import Aside from "../Aside"
// import Footer from "../Footer";

const Layout = ({ children }) => {
  const menu = this.props.data.allWordpressWpApiMenusMenusItems;
  return (

    <StaticQuery
      query={graphql`
        query menuQuery {
          allWordpressWpApiMenusMenusItems {
            edges {
              node {
                id
                name
                items {
                  title
                  object_slug
                  url
                }
              }
            }
          }
        }
      `}

      render={menu => (
        <>
          <Header>
            <MainMenu menu="{data.allWordpressWpApiMenusMenusItems}" />
          </Header>
          <div className="Layout">
            <main>{children}</main>
          </div>
          <footer>Footer</footer>
        </>
      )}
    />
  );
};

Layout.propTypes = {
  children: PropTypes.node.isRequired
};

export default Layout;

菜单组件

import React, { Component } from "react";
// import { Link } from "gatsby";

class MainMenu extends Component {
  render() {
    const data = this.props.data.allWordpressWpApiMenusMenusItems;
    console.log(data);

    return (
      <nav className="main-menu">
        <ul>
          <p>Test</p>
        </ul>
      </nav>
    );
  }
}

export default MainMenu;

预期结果：网站呈现在 localhost:8000
我收到的错误消息：

src/components/Layout/index.js:11
   8 | // import Aside from "../Aside"
   9 | // import Footer from "../Footer";
  10 | 
> 11 | const Layout = ({ children }) => {
  12 |   const menu = this.props.data.allWordpressWpApiMenusMenusItems;
  13 |   return (
  14 |     <StaticQuery

【问题讨论】：

标签： javascript reactjs graphql gatsby react-props

【解决方案1】：

您正在基于函数的组件中访问this.props。将您的声明更改为

const Layout = ({ children, data }) => {
    const menu = data.allWordpressWpApiMenusMenusItems;

或者显式声明props和destructure你想要的属性

const Layout = props => {
    const { data, children, ...rest } = props
    const menu = data.allWordpressWpApiMenusMenusItems;

【讨论】：