Reactjs 返回相同值的映射数据-盖茨比

Reactjs 返回相同值的映射数据-盖茨比,reactjs,react-router,gatsby,Reactjs,React Router,Gatsby,我正在映射一些数据(我在无头cms中存储了3张图像幻灯片)。我将返回的数据传递到幻灯片组件中,并从那里传递到按钮组件,按钮组件只是一个“盖茨比链接”。映射的数据包含一个“页面链接”,每个幻灯片的内容应该有所不同。然而,出于某种原因,相同的“页面链接”被传递到每个按钮,尽管它们应该是不同的。我将数据记录在控制台中,可以确认映射到的每个阵列都包含不同的数据。我为每张幻灯片获取不同的图像、标题、文本等字段,但我为每张幻灯片接收相同的“页面链接”。我对自己做错了什么感到困惑 这是我的密码: GraphQ

我正在映射一些数据(我在无头cms中存储了3张图像幻灯片)。我将返回的数据传递到幻灯片组件中,并从那里传递到按钮组件,按钮组件只是一个“盖茨比链接”。映射的数据包含一个“页面链接”,每个幻灯片的内容应该有所不同。然而,出于某种原因,相同的“页面链接”被传递到每个按钮,尽管它们应该是不同的。我将数据记录在控制台中,可以确认映射到的每个阵列都包含不同的数据。我为每张幻灯片获取不同的图像、标题、文本等字段,但我为每张幻灯片接收相同的“页面链接”。我对自己做错了什么感到困惑

这是我的密码:

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}
            />
          )
        })}
{home\u data.slider.map((幻灯片,索引)=>{
console.log(幻灯片)
返回(
)
})}
幻灯片组件:

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>
  )
}
const Slide=props=>{
返回(
{props.title}
{props.text}

) }
按钮组件: 这只是盖茨比的一个样式化的“链接”组件

const Button = props => {
  return (
    <StyledButton to={props.path} title={`${props.text}`}>
      {props.text}
    </StyledButton>
  )
}
const按钮=道具=>{
返回(
{props.text}
)
}

您在问题中提到了
path\u url
,但我在您的代码中没有看到。你能澄清一下吗?path_url是一个来自我的graphql查询的值,图像、标题、文本也包含在这个查询中,并且正在按它们应该的方式显示。请你在代码中显示你在哪里使用它?我的错误@larz,我在问题中的意思是“页面链接”,而不是“path_url”,我已经更新了我的问题,这样就不那么令人困惑了。我还包括了我的graphql quesy@larz