我找不到帖子未定义

Question

我一直在想在哪里可以找到这个问题。

一直在试图弄清楚为什么会发生此错误。我很难弄清楚这个问题：你能给我一些关于我可以做些什么来调试这个问题的建议吗？

说： 'posts' is not defined 我找不到问题出在哪里我试着扫描我的代码看看是否遗漏了什么，但我找不到任何地方。

import * as React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
// import Bio from "../components/bio"
import Seo from "../components/seo"
import { CoverImage, getImage } from 'gatsby-plugin-image';

  const ArticleListing = ({ data, location, nodes  }) => {
  const siteTitle = data.site.siteMetadata.title || ``
  const posts = data.allMarkdownRemark.nodes

  if (post.length === 0) { // is message tell us if there no post being display post this message.
    return (
      <div id="content">
          <Layout location={location} title={siteTitle}>
            <Seo title="All posts" />
            <p>There were no blogs found. Our team is working hard to create content you will enjoy.</p>
          </Layout>
      </div>
    )
  }

  return ( // This where you be rendering your post.
    <div id="content">
      <Layout location={location} title={siteTitle}>
        <Seo title="All posts" />
        {/* <Bio /> */}
        <ol className="inline_blog" style={{ listStyle: `none` }}>
        {posts.map(function (post) {
                const title = post.frontmatter.title || post.fields.slug;

                let image = getImage(nodes.frontmatter.featuredimage);
                let alt = post.frontmatter.title;

                return (
                    <li key={post.fields.slug}>
                        <article
                            className="post-list-item"
                            itemScope
                            itemType="http://schema.org/Article"
                        >

                            <header>
                                <div className="cover_image">
                                    <CoverImage
                                        image={image}
                                        alt={alt} />
                                </div>

                                <small>
                                    {post.frontmatter.date}
                                </small>

                                <h2 className="post_heading_title">
                                    <Link to={post.fields.slug} itemProp="url">
                                        <span
                                            itemProp="headline">
                                            {title}
                                        </span>
                                    </Link>
                                </h2>
                            </header>

                            <section>
                                <p dangerouslySetInnerHTML={{
                                    __html: post.frontmatter.description || post.excerpt,
                                }}
                                    itemProp="description" />
                            </section>
                        </article>
                    </li>
                );
            })}
        </ol>
      </Layout>
    </div>
  )
}

export default ArticleListing


        
export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }

    allMarkdownRemark(
        sort: { fields: [frontmatter___date], 
    }) {
      nodes {
        id
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
          tages
          featuredimage {
            childImageSharp {
              gatsbyImageData(
                width: 500
                blurredOptions: {width: 100}
                placeholder: BLURRED
                transformOptions: {cropFocus: CENTER}
                aspectRatio: 0.7
              )
            }
          }
        }
      }
    }    
  } 
`

Answer 1

问题是您在 ArticleListing 组件中使用 page query（放置在 src/components/ArticleListing.js) 中，因此在常规 React 组件中。

如您在之前的文档中所见，页面查询仅在 top-level 组件（页面或模板）中可用。

也就是说，根据您的 use-case 结构，您有两种选择。

将 ArticleListing 组件移到 src/templates
中

使用 ustaticQuery hook（或传统的 StaticQuery）创建 GraphQL 查询并使用相同的 JSX 结构来 return 帖子。类似于：

const ArticleListing = ({ data, location, nodes  }) => {
const siteTitle = data.site.siteMetadata.title || ``
  const data = useStaticQuery(graphql`
   query {
    site {
      siteMetadata {
        title
      }
    }

    allMarkdownRemark(
        sort: { fields: [frontmatter___date], 
    }) {
      nodes {
        id
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
          tages
          featuredimage {
            childImageSharp {
              gatsbyImageData(
                width: 500
                blurredOptions: {width: 100}
                placeholder: BLURRED
                transformOptions: {cropFocus: CENTER}
                aspectRatio: 0.7
              )
            }
          }
        }
      }
    }    
  } 
`)


const posts = data.allMarkdownRemark.nodes

if (post.length === 0) { // is message tell us if there no post being display post this message.
  return (
    <div id="content">
        <Layout location={location} title={siteTitle}>
          <Seo title="All posts" />
          <p>There were no blogs found. Our team is working hard to create content you will enjoy.</p>
        </Layout>
    </div>
  )
}

return ( // This where you be rendering your post.
  <div id="content">
    <Layout location={location} title={siteTitle}>
      <Seo title="All posts" />
      {/* <Bio /> */}
      <ol className="inline_blog" style={{ listStyle: `none` }}>
      {posts.map(function (post) {
              const title = post.frontmatter.title || post.fields.slug;

              let image = getImage(nodes.frontmatter.featuredimage);
              let alt = post.frontmatter.title;

              return (
                  <li key={post.fields.slug}>
                      <article
                          className="post-list-item"
                          itemScope
                          itemType="http://schema.org/Article"
                      >

                          <header>
                              <div className="cover_image">
                                  <CoverImage
                                      image={image}
                                      alt={alt} />
                              </div>

                              <small>
                                  {post.frontmatter.date}
                              </small>

                              <h2 className="post_heading_title">
                                  <Link to={post.fields.slug} itemProp="url">
                                      <span
                                          itemProp="headline">
                                          {title}
                                      </span>
                                  </Link>
                              </h2>
                          </header>

                          <section>
                              <p dangerouslySetInnerHTML={{
                                  __html: post.frontmatter.description || post.excerpt,
                              }}
                                  itemProp="description" />
                          </section>
                      </article>
                  </li>
              );
          })}
      </ol>
    </Layout>
  </div>
)
}

export default ArticleListing

我找不到帖子未定义

I cannot find the posts is not defined

reactjs

gatsby