我正在测试Gatsby中的gatsby-source-wordpress
插件,并且试图获取菜单以从Wordpress网站获取链接。
我设法在GraphiQL中提出了所有的Wordpress模式,并从那里复制了GQL代码。
我制作了一个Layout组件,在这里我尽了最大的努力使它起作用。但是,当我将Gatsby网站部署到本地主机时,我不断收到 TypeError:无法读取未定义的属性'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
答案 0 :(得分:2)
您正在基于函数的组件中访问this.props
。将声明更改为
const Layout = ({ children, data }) => {
const menu = data.allWordpressWpApiMenusMenusItems;
或显式声明props
和destructure
所需的属性
const Layout = props => {
const { data, children, ...rest } = props
const menu = data.allWordpressWpApiMenusMenusItems;