Reactjs 在Gatsby中使用变量创建页面时出现白色屏幕_Reactjs_Gatsby

Reactjs 在Gatsby中使用变量创建页面时出现白色屏幕

reactjs gatsby

Reactjs 在Gatsby中使用变量创建页面时出现白色屏幕,reactjs,gatsby,Reactjs,Gatsby,我试图在盖茨比中创建动态产品页面。下面是我在文件gatsby node.js exports.createPages = async ({ graphql, actions }) => { const { createRedirect } = actions const { createPage } = actions const { data: { products }, } = await graphql(` { products: al

我试图在盖茨比中创建动态产品页面。下面是我在文件

gatsby node.js

exports.createPages = async ({ graphql, actions }) => {
  const { createRedirect } = actions
  const { createPage } = actions

  const {
    data: { products },
  } = await graphql(`
    {
      products: allTestJson {
        edges {
          node {
            brand
            category
          }
        }
      }
    }
  `)

  const nodeArray = products.edges.map(edge => edge.node.brand)
  const unique = [...new Set(nodeArray)]
  console.log("UNIQUE")
  console.log(unique)

  unique.forEach((brand) => {
    console.log("BRAND")
    console.log(brand)
    createPage({
      path: `/products/${brand}`,
      component: require.resolve(`./src/pages/contact-us.js`),
    })
  })
}

这里我执行console.log，我确信

${node.brand}

返回一个值。（其中之一是“法罗”）。但是，当我在浏览器上访问/products/faro时，我只看到一个大的白色空白页：

当我将路径更改为路径：“路径：

/products/faro

”（只是硬代码路径作为products/faro），那么页面组件将正确呈现

循环或变量是否有问题？我正在学习这个教程

import React，{Component}来自“React”
从“样式化组件”导入样式化
从“盖茨比插件intl”导入{injectIntl，Link，FormattedMessage}
从“./组件/布局”导入布局
从“./组件/SEO”导入SEO
从“./components/layout/Background”导入{Background}
从“./components/layout/Space”导入{Space}
从“./组件/生物体/展厅网格”导入展厅网格
从“./components/Organics/ContactForm”导入ContactForm
从“./组件/分子/贴图”导入贴图
类ContactUs扩展组件{
状态={
responsiveSize:null，
}
componentDidMount=（）=>{
这是我的国家({
响应大小：window.innerWidth，
})
}
render（）{
const{responsiveSize}=this.state
返回(
nanoHome |联系我们
您没有获得404页面这一事实表明您的页面创建正确
页面是否可能需要某种道具？在您链接的教程中，看起来他们正在传递一个id
prop。要传递此类道具，您需要将上下文
arg传递到createPage
（例如createPage（{component，path，context:{id}）
）…但是你提供的代码没有任何
无论问题是什么，它可能在contact us.js
中，因此您需要调试它。
您没有获得404页面这一事实表明您的页面创建正确
页面是否可能需要某种道具？在您链接的教程中，看起来他们正在传递一个id
prop。要传递此类道具，您需要将上下文
arg传递到createPage
（例如createPage（{component，path，context:{id}）
）…但是你提供的代码没有任何
无论问题是什么，它似乎在contact us.js
中，所以您需要调试它。问题是我从graphql加载的“品牌数据”有一些大写字母，浏览器总是小写文本，因此它与gatsby-node.js中的路径不匹配。谢谢@harley发现这一点。
感谢您的帮助。问题是我从graphql加载的“品牌数据”有一些大写字母，浏览器总是小写文本，因此它与gatsby-node.js中的路径不匹配。感谢@harley发现这一点。
谢谢您的帮助。
您是否再次尝试通过运行gatsby develope
来重新启动gatsby？是的，很多。事实上，每当我编辑gatsby节点时，我都必须重新启动它。我不确定细节，但是，它是否与gatsby build
和gatsby service
一起工作？@ShinaBR2gatsby build
和gatsbe serve
进展顺利。你能再调试一下节点的值吗？brand
？我认为问题就出在那里，因为如果值是硬编码的，那么一切都会按预期工作。静态页面（例如/contact us）有一个动态创建（应该是页面查询）对我来说有点奇怪但是，这是完全可行的。您是否再次尝试通过运行gatsby develope
来重新启动gatsby？是的，很多。事实上，每当我编辑gatsby节点时，我都必须重新启动它。我不确定细节，但是，它是否与gatsby build
和gatsby service
一起工作？@shinab2gatsby build
和gatsbe serve
运行良好您能调试一下节点的值吗？brand
？我假设问题就出在那里，因为如果值是硬编码的，那么一切都会按预期工作。静态页面（例如/contact us）具有动态创建（应该是页面查询）对我来说有点奇怪，但是，它是完全可行的。在这里，我还没有通过任何道具。我只是想在我还在练习的时候呈现contact-us组件，所以没有数据传输。我不认为contact-us.js有任何问题，就像我用“faro”（硬编码）替换${node.brand}
一样，然后正确渲染。您可以在上面的第二张图片中看到它。如果这是真的，那么您在node.brand
中有一个打字错误，就像一个空格。我认为您确实需要添加console.log（1，node.brand，2）
，并仔细查看结果。但同样，有些东西不太合算，因为如果你没有正确的路径，你会得到一个404页面（尝试在你的网站上访问/askjashds
，看看这是什么样子）.我算出来了。不是间距，而是大写字母。当我用graphql查询产品列表中的数据时，品牌是Faro（大写F）=>路径变为/products/Faro。在浏览器中，Faro将自动小写为/Faro，因此它无法找到路径。在这里，我还没有通过任何道具。我只是想呈现contact us组件，因为我还在练习，所以没有数据传输。我不认为contact-us.js在替换${node.brand}使用“faro”（硬编码），然后正确渲染。您可以在上面的第二张图片中看到它。如果这是真的，那么您有一个输入错误i
import React, { Component } from "react"
import styled from "styled-components"
import { injectIntl, Link, FormattedMessage } from "gatsby-plugin-intl"

import Layout from "../components/layout"
import SEO from "../components/seo"
import { Background } from "../components/layout/Background"
import { Space } from "../components/layout/Space"
import ShowroomGrid from "../components/organisms/ShowroomGrid"
import ContactForm from "../components/organisms/ContactForm"
import Map from "../components/molecules/Map"

class ContactUs extends Component {
  state = {
    responsiveSize: null,
  }

  componentDidMount = () => {
    this.setState({
      responsiveSize: window.innerWidth,
    })
  }

  render() {
    const { responsiveSize } = this.state
    return (
      <Layout>
        <SEO
          description="Visit our showrooms in Ho Chi Minh City & Hanoi to admire the timeless masterpieces from Fritz Hansen, Flos, Louis Poulsen, Fontana Arte & Faro."
          title="Contact Us - nanoHome showrooms in HCM & Hanoi"
          keywords={[`luxury`, `lighting`, `furniture`, `showroom`]}
        />
        <Background>
          <MainContainer className="main-container">
            <Space height="64" />
            <H1Tag>nanoHome | Contact Us</H1Tag>
            <SectionMapAndContact responsiveSize={responsiveSize}>
              <GoogleMap>
                <Map />
              </GoogleMap>
              <Contacts>
                <Title>
                  <FormattedMessage id="page-contact-us.section-map-and-contact.title" />
                </Title>
                <Space height="48" />
                <Address>
                  <b>
                    <FormattedMessage id="page-contact-us.section-map-and-contact.office" /> </b> <Space height="16" />
                  <p>
                  <FormattedMessage id="page-contact-us.section-map-and-contact.address" />
                  </p>
                  <Space height="16" />
                  <p>‭+84 90 984 0028</p>
                  <Space height="8" />
                  <p>info@nanohome.vn</p>
                  <Space height="8" />
                  <p>www.nanohome.vn</p>
                </Address>
              </Contacts>
            </SectionMapAndContact>
            <Space height="64" />
            <SectionShowrooms>
              <Title>Our Showrooms</Title>
              <Space height="48" />
              <ShowroomGrid responsiveSize={responsiveSize} />
            </SectionShowrooms>
            <Space height="64" />
            <SectionContactForm responsiveSize={responsiveSize}>
              <Title>Get in Touch</Title>
              <Space height="48" />
              <ContactForm />
            </SectionContactForm>
          </MainContainer>
        </Background>
      </Layout>
    )
  }
}

const MainContainer = styled.div`
  margin: 0 auto;
`

const SectionMapAndContact = styled.div`
  max-width: 960px;
  margin: auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: ${props =>
    props.responsiveSize > 1024 ? "1fr 1fr" : "1fr"};
  grid-template-rows: ${props =>
    props.responsiveSize < 1024 ? "1fr auto" : "1fr"};
  align-items: center;
  justify-content: center;
  grid-gap: ${props => (props.responsiveSize > 1024 ? "4rem" : "2rem")};
`
const GoogleMap = styled.div`
  width: 100%;
  height: 500px;
`
const Contacts = styled.div`
  width: 100%;
  max-width: 440px;
`
const Title = styled.h2`
  font-size: var(--font-size-larger);
  color: var(--color-primary-blue);
  font-family: "Miller";
`
const Address = styled.div`
  color: var(--color-primary-blue);
  font-size: var(--font-size-large);
  border-left: 2px solid var(--color-primary-blue);
  padding: 0 2rem;
  p {
    font-size: var(--font-size-medium);
    line-height: 1.5;
    margin: 0;
  }
`
const SectionShowrooms = styled.div`
  padding: 0 2rem;
  max-width: 960px;
  margin: auto;
`

const SectionContactForm = styled.div`
  width: ${props =>
    (props.responsiveSize > 1024 && "24%") ||
    (props.responsiveSize > 768 && "50%") ||
    (props.responsiveSize > 480 && "80%") ||
    "100%"};
  margin: auto;
  max-width: 960px;
  padding: 0 2rem;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
`

const H1Tag = styled.h1`
  visibility: hidden;
  font-size: var(--font-size-smaller);
`

export default ContactUs