盖茨比中的 createPages 问题；重复和未渲染的内容

问题描述

我在尝试呈现单个博客文章时遇到了一些错误。

我尝试将页面模板与 /post/{post_name} 一起使用，但出现此错误：

警告非确定性路由危险：尝试创建页面：“/blog/”，但是页面“/blog”已经存在这可能会导致不确定的路由行为

我再次尝试使用 /blog/{post_name}。

我现在有两条路线，我不知道如何清理；但更重要的是，在这些页面上，没有任何内容呈现，即使应该有一个 h1，它的 innerhtml 设置为 node.title 并且同样为内容设置一个 div。

我已将我的配置和组件上传到 https://github.com/zackrosegithub/gatsby，以便您查看。

不知道怎么解决

我只想看到我的内容呈现在屏幕上。

当没有呈现任何内容时，开发者工具似乎无济于事，因为我找不到任何要检查的内容来尝试以其他方式访问它。

感谢您的帮助

解决方法

您的方法部分正确。您正在使用基于承诺的方法，但是在使用 then() 时，您已经解决并部分解决了它，因此您不需要使用 resolve() 的回调，这可能会导致重复承诺功能，因此请尝试将其删除。

此外，您可能希望使用 async/await 函数使用更友好的方法。类似的东西：

exports.createPages = async ({ graphql,actions,reporter }) => {
  const yourQuery= await graphql(
          `
            {
              allWordpressPost {
                edges{
                  node{
                    id
                    title
                    slug
                    excerpt
                    content
                  }
                }
              }
            }
          `
  if (yourQuery.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`);

    return;
  }
  

          const postTemplate = path.resolve("./src/templates/post.js")
          _.each(yourQuery.data.allWordpressPost.edges,edge => {
            createPage({
              path: `/post/${edge.node.slug}/`,component: slash(postTemplate),context: edge.node,})
          })
        })

 // and so on for the rest of the queries

};

此外，在您的 console.log(pageContext) 中放置一个 postTemplate 以获取到达该点的内容并将模板命名为：

const Post = ({pageContext}) => {
 console.log("your pageContext is",pageContext); 
return  <div>
        <h1>
            {pageContext.title}
        </h1>
    </div>
}

export default Post;

gatsby headless-cms wordpress wordpress