在页面重新加载时，我的 Gatsby.js 页脚组件呈现两次

Question

感谢您花时间查看我的问题。非常感谢任何帮助。

**更新： 好的，所以我想我知道是什么导致了问题，但我不知道为什么。以前，在我的产品/商品页面上，我的数据库中只有一项。在产品/豆类页面上，我有多个项目。在只有一个查询结果的产品/商品页面上，页脚没有显示两次。一旦我在商品类别中添加了另一个商品并且 products/merch 有两个商品，在页面重新加载时它也开始复制页脚。

为什么多个查询会对页面的呈现方式产生任何影响？对此有什么解决方案？我将尝试将数据作为道具从 graphql 传递到 allProducts 组件，看看是否能解决问题。 **

我正在为我正在构建的电子商务网站使用 Gatsby.js 和 Strapi 无头 CMS。在显示特定类别中所有产品的页面上，如果重新加载页面，它会呈现两次页脚。这很令人困惑，因为当页面第一次呈现时它很好，但只有在重新加载时才会这样做。如果网站从该特定页面加载，它还会显示两个页脚。一旦我导航到另一个页面并重新加载，第二个页脚就会消失。这个给我问题的页面有一个 GraphQL 查询。我有另一个页面也有 GraphQL 查询，但它不这样做。此页面中的某些内容导致渲染出现问题。

我尝试过的： 在 gatsby-node.js 中，在 createPages 导出中，我尝试创建每个页面并传递模板和“类型”上下文，以便 GraphQL 查询可以过滤页面所需的数据。我认为以这种方式使用 createPage 可能会导致呈现问题。我还尝试删除 Footer 组件的内容并将它们直接放在 layout.js 中。我试过从页面中删除 Layout 组件并直接添加 Header.js 和 Footer.js ，仍然是同样的问题。我只有在托管它后才遇到这个问题，而不是在本地主机上。是服务器端渲染的问题吗？这是 gatsby cloud 上托管的站点的链接，如果您单击任何其他页面并刷新第二个页脚就会消失，但如果您单击返回此页面然后刷新第二个页脚会再次弹出。

https://build-856af2e5-f049-46de-b6a5-9e11aa46a906.gtsb.io/products/beans/

  createPage({
    path: "/products/merch",
    component: path.resolve(`src/templates/allproducts.js`),
    context: {
      type: "merch",
    },
  })

  createPage({
    path: "/products/beans",
    component: path.resolve(`src/templates/allproducts.js`),
    context: {
      type: "beans",
    },
  })

然后我将每个页面移动到 Gatsby pages 文件夹中的一个文件夹中。因此，我没有使用 createPages 以编程方式创建它们，而是通过创建产品文件夹然后为每个类别添加新页面来制作它们。这并没有通过手动创建页面而不是使用 createPages 来解决我的问题。

在我的 layout.js 中为什么页脚会加载两次而不是页眉或主要组件对我来说没有意义，看起来像这样：

import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import Footer from "./Footer"
import Header from "./header"
import "./layout.css"

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />

      <main>{children}</main>
      <Footer />
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

这是 Footer.js 组件：

import React from "react"
import { Facebook, Instagram, Twitter } from "@material-ui/icons"
import styled from "styled-components"

const BottomNav = styled.footer`
  border-top: 1px solid black;
  position: sticky;
  height: 15vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: Raleway;
  text-transform: uppercase;
`

const BottomNavContainer = styled.div`
  display: flex;
  justify-content: space-between;
  width: 200px;
  margin-bottom: 0.3rem;
`

const Footer = () => {
  return (
    <BottomNav>
      <BottomNavContainer>
        <Facebook />
        <Instagram />
        <Twitter />
      </BottomNavContainer>

      <div>
        © {new Date().getFullYear()},{` `} The Blank
      </div>
    </BottomNav>
  )
}

export default Footer

这里是复制页脚的页面的代码：

function Alert(props) {
  return <MuiAlert elevation={6} variant="filled" {...props} />
}

const AllBeansPage = props => {
  const products = props.data.allStrapiProduct.nodes
  // const classes = useStyles()
  const [open, setOpen] = React.useState(false)
  const { addToCart } = useContext(CartContext)
  const handleClick = () => {
    setOpen(true)
  }

  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return
    }

    setOpen(false)
  }

  return (
    <Layout>
      <SEO
        title={
          products[0].type.charAt(0).toUpperCase() + products[0].type.slice(1)
        }
      />
      <Fade in={true} timeout={{ enter: 2000, exit: 500 }}>
        <AllProductsContainer>
          <Container>
            {products.map(product => (
              <Slide
                direction="left"
                in={true}
                mountOnEnter
                unmountOnExit
                timeout={{ enter: 1500, exit: 500 }}
              >
                <ProductCard key={product.id}>
                  <Link
                    key={product.id}
                    style={{}}
                    to={`products/${product.type}/${product.slug}`}
                  >
                    <ImageContainer>
                      {console.log(product.thumbnail.childImageSharp.fluid)}
                      <Img
                        key={product.id}
                        fluid={product.thumbnail.childImageSharp.fluid}
                      />
                    </ImageContainer>
                  </Link>
                  <ProductContent>
                    <Typography
                      gutterBottom
                      variant="h5"
                      component="h1"
                      style={{
                        fontFamily: "Caveat",
                        fontSize: "clamp(22px, 3vw, 28px)",
                      }}
                    >
                      {product.name}
                    </Typography>
                    <Typography
                      variant="body2"
                      color="textSecondary"
                      style={{ fontSize: "clamp(12px, 1.5vw, 16px)" }}
                    >
                      {product.description.slice(0, 35)}...
                    </Typography>

                    <Link
                      key={product.id}
                      style={{}}
                      to={`products/${product.type}/${product.slug}`}
                    >
                      {" "}
                      <Typography
                        variant="subtitle1"
                        color="primary"
                        style={{ fontSize: "clamp(14px, 1.5w, 18px)" }}
                      >
                        Learn More
                      </Typography>
                    </Link>
                  </ProductContent>
                  <CardActionArea>
                    <CardActions
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                      }}
                    >
                      <Button
                        size="small"
                        color="primary"
                        onClick={() => {
                          addToCart(product, 1)
                          handleClick()
                        }}
                        style={{ fontSize: "clamp(12px, 1.5vw, 18px)" }}
                      >
                        Add To Cart
                      </Button>
                      <Typography
                        variant="body1"
                        style={{ fontSize: "clamp(12px, 1.5vw, 18px)" }}
                      >
                        {formatPrice(product.price_in_cents)}
                      </Typography>
                    </CardActions>
                  </CardActionArea>
                </ProductCard>
              </Slide>
            ))}
          </Container>
        </AllProductsContainer>
      </Fade>
      <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
        <Alert onClose={handleClose} severity="success">
          Item successfully added to cart.
        </Alert>
      </Snackbar>
    </Layout>
  )
}

export default AllBeansPage

export const productQuery = graphql`
  query allBeanQuery {
    allStrapiProduct(filter: { type: { eq: "beans" } }) {
      nodes {
        strapiId
        id
        description
        created_at
        price_in_cents
        name
        slug
        type
        thumbnail {
          childImageSharp {
            fluid(quality: 100, maxWidth: 150, maxHeight: 150) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

Answer 1

好的！所以这是解决方案。如果您使用的是 GatsbyJS 和 CMS，如果您使用 Material-UI，有时可能会出现在服务器上渲染内容的问题。我在想 Material-UI 中的某些东西会导致页面上的重新渲染。基本上，在产品页面组件中，我替换了

<Button
    onClick={() => {
    addToCart(product, 1)
    handleClick()
   }}
  style={{ fontSize: "clamp(12px, 1.5vw, 16px)" }}>ADD TO CART
 </Button>

与

<div
    onClick={() => {
    addToCart(product, 1)
    handleClick()
   }}
  style={{ fontSize: "clamp(12px, 1.5vw, 16px)" }}>ADD TO CART
</div>

然后它起作用了。因此，如果您在一个页面上呈现两个相同的组件并且一切看起来都正确，请仔细检查您正在使用的组件库是否导致问题。