我正在测试来自 Gatsby 的 gatsby-source-wordpress
插件,并且我正在尝试让我的菜单从我的 Wordpress 网站获取链接。
我已设法在 GraphiQL 中显示所有 Wordpress 架构,并从那里复制 GQL 代码。
我已经制作了一个布局组件,我已经尽了最大努力使其工作。但是,当我将 Gatsby 站点部署到本地主机时,我不断收到 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
最佳答案
您正在基于函数的组件中访问 this.props
。将您的声明更改为
const Layout = ({ children, data }) => {
const menu = data.allWordpressWpApiMenusMenusItems;
或者显式声明props
并解构
您想要的属性
const Layout = props => {
const { data, children, ...rest } = props
const menu = data.allWordpressWpApiMenusMenusItems;
关于javascript - 卡在未定义的 "Cannot read property ' props' 处”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57808363/