TypeError:无法读取属性' markdownRemark'未定义的(React + Node)

时间:2017-06-01 15:02:02

标签: node.js reactjs typeerror react-proptypes

我使用Gatsby v1.0编写我的应用程序。 现在我的控制台出错了我的错误:

enter image description here

首先,这很奇怪,因为'孩子'有它的' PropTypes,你可以看到下面的组件:

import React from "react"
import Link from "gatsby-link"
import { Container } from "react-responsive-grid"

import { rhythm, scale } from "../utils/typography"

class Template extends React.Component {
  render() {
    const { location, children } = this.props
    let header
    if (location.pathname === "/") {
      header = (
        <h1 >
          <Link to={"/"}>
            Gatsby Starter Blog
          </Link>
        </h1>
      )
    } else {
      header = (
        <h3>
          <Link to={"/"} >
            Gatsby Starter Blog
          </Link>
        </h3>
      )
    }
    return (
      <Container>
        {header}
        {children()}
      </Container>
    )
  }
}

Template.propTypes = {
  children: React.PropTypes.function,
  location: React.PropTypes.object,
  route: React.PropTypes.object,
}

export default Template

此外,我的项目未启动,因为localhost显示错误: TypeError:无法读取属性&#39; markdownRemark&#39;未定义的

我认为Node.js部分有问题,但所有模块都已安装,我确信与组件有关,因为它是入门工具包,看到这些错误很奇怪。或许我应该修复以前的组件(它们在连接中)。

const _ = require("lodash")
const Promise = require("bluebird")
const path = require("path")
const select = require(`unist-util-select`)
const fs = require(`fs-extra`)

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { upsertPage } = boundActionCreators

  return new Promise((resolve, reject) => {
    const pages = []
    const blogPost = path.resolve("./src/templates/blog-post.js")
    resolve(
      graphql(
        `
      {
        allMarkdownRemark(limit: 1000) {
          edges {
            node {
              fields {
                slug
              }
            }
          }
        }
      }
    `
      ).then(result => {
        if (result.errors) {
          console.log(result.errors)
          reject(result.errors)
        }

        // Create blog posts pages.
        _.each(result.data.allMarkdownRemark.edges, edge => {
          upsertPage({
            path: edge.node.fields.slug, // required
            component: blogPost,
            context: {
              slug: edge.node.fields.slug,
            },
          })
        })
      })
    )
  })
}

// Add custom slug for blog posts to both File and MarkdownRemark nodes.
exports.onNodeCreate = ({ node, boundActionCreators, getNode }) => {
  const { addFieldToNode } = boundActionCreators
  if (node.internal.type === `File`) {
    const parsedFilePath = path.parse(node.relativePath)
    const slug = `/${parsedFilePath.dir}/`
    addFieldToNode({ node, fieldName: `slug`, fieldValue: slug })
  } else if (node.internal.type === `MarkdownRemark`) {
    const fileNode = getNode(node.parent)
    addFieldToNode({
      node,
      fieldName: `slug`,
      fieldValue: fileNode.fields.slug,
    })
  }
}

0 个答案:

没有答案