console.log()在從我的 GraphQL 查詢映射我的數據後，我可以得到我想要的數據。但是，嵌套.map函數沒有呈現我的 JSX。是否可以在嵌套中呈現 JSX .maps？
const NikonGallery = ({ data }) => {
return (
<Layout>
{data.allFiles.nodes.map((item) => {
Object.entries(item).map(([key, value]) => {
value.map((image) => {
console.log("Individual image", image) // Logs show the data I want
return (
<>
<GatsbyImage
image={image.gatsbyImageData}
alt={image.description}
/>
</>
)
})
})
})}
</Layout>
)
}
export default NikonGallery
來自 GraphQL/Contentful 的數據是一個嵌套的對像數組。當我通過.map.
關於嵌套映射，您需要進行一些更改以從每個映射返回正確的表達式。控制台日誌工作的原因是因為代碼仍然循環；然而，React 不會從地圖中返回任何表達式來渲染。嘗試這個：
data.allFiles.nodes.map((item) => {
return Object.entries(item).map(([key, value]) => {
return value.map((image) => {
console.log("Individual image", image) // Logs show the data I want
return (
<>
<GatsbyImage
image={image.gatsbyImageData}
alt={image.description}
/>
</>
)
})
})
})}
</Layout>
)
像這樣的動態圖片使用Gatsby圖片插件時，應該使用getImage()插件提供的方法。導入應如下所示：
import { GatsbyImage, getImage } from "gatsby-plugin-image";
您的情況下的用法如下所示：
value.map((image) => {
const gatsbyImage = getImage(image);
return (
<>
<GatsbyImage
image={gatsbyImage}
alt={image.description}
/>
</>
)
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句