javascript - 卡在“无法读取未定义的属性‘道具’”
问题描述
我正在测试来自Gatsbygatsby-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
解决方案
您正在访问this.props
基于函数的组件。将您的声明更改为
const Layout = ({ children, data }) => {
const menu = data.allWordpressWpApiMenusMenusItems;
或者显式声明props
和destructure
你想要的属性
const Layout = props => {
const { data, children, ...rest } = props
const menu = data.allWordpressWpApiMenusMenusItems;
推荐阅读
- python - 如何在 Linux 上将麦克风采样率更改为 16000?
- php - 应用程序:使用 symfony 4 的 @ParamConverter 注释未找到发布对象
- wordpress - wordpress自定义帖子类型分页404第2页错误
- html - 如何使 Typo3 Fluid 产生
- reactjs - 反应太多的重新渲染
- python - 如何在 django 中将钱包与 walletconnet 连接?
- c# - 在运行时为 xaml .Net 2.0 多平台移动开发分配图像资源
- ruby - 在 MacOS 上为 Flutter 安装 cocoapods 时出现问题
- .net-core - 使用 Azure 应用配置强制更新配置
- python - 没有这样的列:user.is_admin