卡在"Cannot read property 'props' of undefined"

Question

我正在测试Gatsby的gatsby-source-wordpress插件，我正在尝试让我的菜单从我的Wordpress网站获取链接。

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

我制作了一个布局组件，在那里我尝试了大部分可以使其工作。但是，我不断收到类型错误：当我将我的盖茨比站点部署到本地主机时，无法读取未定义的属性"props"。

以前有人遇到过这种情况吗？我对 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

Answer 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;