Спасибо, что нашли время посмотреть на мою проблему. Я был бы очень признателен за любую помощь.
** Обновление: Хорошо, я думаю, что знаю, что вызывает проблему, но не знаю почему. Раньше на моей странице продуктов / товаров в моей базе данных был только один товар. На странице продуктов / бобов у меня было несколько элементов. На странице продуктов / товаров, где был только один результат запроса, нижний колонтитул не отображался дважды. Как только я добавил еще один товар в категорию товаров, и у продуктов / товаров было два товара, при перезагрузке страницы он также начал дублировать нижний колонтитул.
Почему несколько запросов будут иметь какое-либо влияние на отображение страницы? Какие могут быть решения для этого? Я собираюсь попытаться передать данные в качестве реквизита из graphql в компонент allProducts, чтобы посмотреть, решит ли это проблему. **
Я использую Gatsby. js и Strapi headless CMS для сайта электронной коммерции, который я создаю. На странице, на которой отображаются все продукты в определенной категории c, если страница перезагружается, нижний колонтитул отображается дважды. Это сбивает с толку, потому что когда страница сначала отображается, все нормально, но только при перезагрузке. Если веб-сайт загружается с указанной страницы c, он также отображает два нижних колонтитула. Когда я перехожу на другую страницу и перезагружаюсь, второй нижний колонтитул исчезает. Эта страница, вызывающая у меня проблему, содержит запрос GraphQL. У меня есть другая страница, на которой также есть запрос GraphQL, но он этого не делает. Что-то на этой странице вызывает проблемы при рендеринге.
Что я пробовал: в gatsby- node.js в экспорте createPages я пытался создать каждую страницу и передать шаблон и контекст «type», чтобы запрос GraphQL мог затем фильтровать данные, которые нужны странице. Я думал, что использование createPage таким образом может вызвать проблемы с отрисовкой. Я также попытался удалить содержимое компонента Footer и напрямую разместить его в макете. js. Я попытался удалить компонент Layout со страницы и напрямую добавить Header. js и Footer. js, все та же проблема. Я испытываю эту проблему только после того, как размещаю ее, а не на локальном хосте. Это проблема с рендерингом на стороне сервера? Вот ссылка на сайт, размещенный в облаке gatsby, и если вы нажмете на любую другую страницу и обновите sh, второй нижний колонтитул исчезнет, но если вы вернетесь на эту страницу, а затем обновите sh, второй нижний колонтитул появится снова .
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. Поэтому вместо использования createPages для их программного создания я сделал их традиционно, создав папку продуктов, а затем добавив новую страницу для каждой категории. Это не решило мою проблему путем создания страниц вручную вместо использования createPages.
Для меня не имеет смысла, почему нижний колонтитул загружался дважды, а не заголовок или основной компонент в моем макете. 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
Вот нижний колонтитул. 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
}
}
}
}
}
}
`