Отображение данных, возвращающих одинаковое значение - Гэтсби - PullRequest
Новая
       18

Отображение данных, возвращающих одинаковое значение - Гэтсби

0 голосов
/ 22 января 2020

Я сопоставляю некоторые данные (3 слайда изображения, которые я сохранил в безголовых cms). Я передаю перенастроенные данные в компонент слайда, и оттуда они передаются в компонент кнопки, который является просто «gatsby-link». Сопоставленные данные содержат ссылку на страницу, помимо прочего, для каждого слайда они должны быть разными. Однако по какой-то причине одна и та же «page_link» передается каждой кнопке, хотя они все должны быть разными. Я регистрирую свои данные в консоли и могу подтвердить, что каждый отображаемый массив содержит разные данные. Я получаю разные изображения, заголовок, текст и т. Д. c для каждого слайда, но получаю одну и ту же ссылку на страницу для каждого слайда. Я не понимаю, что я делаю неправильно.

Вот мой код:

Запрос GraphQl: 

const HOMEPAGE_DATA = graphql`
  query {
    prismicHomePage {
      data {
        body {
        slider {
          title {
            text
          }
          text {
            text
          }
          page_link{
           text
          }
          button_text{
           text
          }
          image {
            localFile {
              childImageSharp {
                fluid(maxWidth: 1280, quality: 90) {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
          }
        }
      }
    }
  }
`

  // get homepage data
  const data = useStaticQuery(HOMEPAGE_DATA)

  // simplify data
  const home_data = data.prismicHomePage.data

Сопоставленные данные: 

        {home_data.slider.map((slide, index) => {
          console.log(slide)
          return (
            <Slide
              key={slide.title.text}
              title={slide.title.text}
              image={slide.image.localFile.childImageSharp.fluid}
              text={slide.text.text}
              button_text={slide.button_text.text}
              path_link={slide.page_link.text}
            />
          )
        })}

Компонент слайда: 

const Slide = props => {
  return (
    <StyledBackgroundImage fluid={props.image} alt={`${props.title}`}>
      <Wrapper>
        <SlideContent>
          <h1>{props.title}</h1>
          <p>{props.text}</p>

          <div className="slide-btn">
            <Button path={props.path_link} text={props.button_text} />
          </div>
        </SlideContent>
      </Wrapper>
    </StyledBackgroundImage>
  )
}

Компонент кнопки: это просто стилизованный компонент «Link» от Gatsby. 

const Button = props => {
  return (
    <StyledButton to={props.path} title={`${props.text}`}>
      {props.text}
    </StyledButton>
  )
}
...