[英]How to fix “TypeError: _this is undefined”
我正在用 Gatsby 構建一個站點,現在我正在創建一個 blog-post.js 文件,該文件通過 markdown 文件中的 graphql 數據進行查詢,並為每個文件創建頁面。 它還應該包括 Header、Footer 和一個預定義的 GridItem,內容應該在其中呈現。
但是由於以下原因,GridItem 沒有按預期呈現:
“類型錯誤:_this 未定義”。
我對 Javascript 很陌生,我已經發現問題出在這兩個
const post = data.markdownRemark,
{ classes, ...rest } = this.props;
因為如果我只使用其中一個,一切都可以正常工作。
import React from "react"
import { graphql } from "gatsby"
import GridItem from "components/Grid/GridItem.jsx";
import GridContainer from "components/Grid/GridContainer.jsx";
import Footer from "components/Footer/Footer.jsx";
import Header from "components/Header/Header.jsx";
import HeaderLinks from "components/Header/HeaderLinks.jsx";
import Parallax from "components/Parallax/Parallax.jsx";
import classNames from "classnames";
export default ({ data }) => {
const post = data.markdownRemark,
{ classes, ...rest } = this.props;
return (
<div>
<Header
brand="diemax"
rightLinks={<HeaderLinks />}
fixed
color="transparent"
changeColorOnScroll={{
height: 400,
color: "white"
}}
{...rest}
/>
<Parallax small filter image={require("assets/img/profile-bg.jpg")} />
<div className={classNames(classes.main, classes.mainRaised)}>
<div>
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={6}>
<div className={classes.title}>
<h1>{post.frontmatter.title}</h1>
</div>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</GridItem>
</GridContainer>
</div>
</div>
</div>
<Footer />
</div>
)
}
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
}
`
問題就在這里
{ classes, ...rest } = this.props;
您使用功能組件。 因此,您在此沒有對組件實例的引用。 您必須按以下方式access
道具:
export default ({ data, props }) => {
const post = data.markdownRemark,
{ classes, ...rest } = props;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.