Компонент в wrapPageElement перерисовывает - GatsbyJS

Question

Я установил gatsby-plugin-layout, чтобы сохранить постоянный компонент Layout. В компоненте Layout у меня есть компонент с именем RandomBackground, который делает именно это, он показывает случайное фоновое изображение при загрузке страницы.

Однако фоновое изображение изменяется при последующих изменениях страницы, что является нежелательным поведением.

Что я делаю не так? Сокращенный код ниже.

gatsby-config.js

{
  resolve: `gatsby-plugin-layout`,
  options: {
    component: require.resolve(`./src/components/Layout`),
  },
}

Макет

const Layout = ({ children }) => {
  return (
    <>
      <Content>
        <main>{children}</main>
      </Content>

      <RandomBackground />
    </>
  )
}

RandomBackground

import React from 'react'
import Image from 'gatsby-image'
import { useStaticQuery, graphql } from 'gatsby'
import styled from '@emotion/styled'

const BackgroundImg = styled(Image)`
  object-fit: cover;
  width: 100vw;
  height: 100vh;
`

const randomGenerator = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min
}

const RandomBackground = () => {
  const data = useStaticQuery(graphql`
    query ImageQuery {
      wordPress {
        pageBy(uri: "home") {
          homeFields {
            backgroundImage {
              images {
                sourceUrl
                imageFile {
                  childImageSharp {
                    fluid {
                      ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  `)

  const images = data.wordPress.pageBy.homeFields.backgroundImage.images
  const randomPosition = randomGenerator(0, images.length - 1)
  const randomizedImage = images[randomPosition].imageFile.childImageSharp
  console.log('render') // pops up in console every page change

  return (
    <BackgroundImg fluid={randomizedImage.fluid} />
  )
}

Answer 1

Ваше фоновое изображение меняется при «смене страницы», потому что каждый раз, когда изменяется страница, ваш Layout компонент повторно визуализируется.

Чтобы сохранить фоновое изображение, сохраните генерацию случайных чисел всостояние на RandomBackground примерно так:

RandomBackground

import {useState} from 'react';
...
const RandomBackground = () => {
  const data = useStaticQuery(graphql`
    query ImageQuery {
      wordPress {
        pageBy(uri: "home") {
          homeFields {
            backgroundImage {
              images {
                sourceUrl
                imageFile {
                  childImageSharp {
                    fluid {
                      ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  `)

  const images = data.wordPress.pageBy.homeFields.backgroundImage.images
  const randomPositionInitial = randomGenerator(0, images.length - 1);
  const [randomPosition] = useState(randomPositionInitial);
  const randomizedImage = images[randomPosition].imageFile.childImageSharp
  console.log('render') // pops up in console every page change

  return (
    <BackgroundImg fluid={randomizedImage.fluid} />
  )
}