Как исправить «TypeError: _это не определено»

Question

Я создаю сайт с помощью Gatsby, и сейчас я работаю над созданием файла blog-post.js, который запрашивает данные graphql из файлов уценки и создает страницы для каждого из них.Он также должен включать в себя верхний колонтитул, нижний колонтитул и предопределенный GridItem, в котором содержимое должно отображаться.

Но GridItem не отображается должным образом из-за:

"TypeError:_this undefined ".

Я довольно новичок в 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
      }
    }
  }
`

Answer 1

Проблема здесь

{ classes, ...rest } = this.props;

Вы используете функциональный компонент.Таким образом, у вас нет ссылки на экземпляр компонента в этом.Вы должны access реквизит, как показано ниже:

export default ({ data, props }) => {
  const post = data.markdownRemark, 
  { classes, ...rest } = props;