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