在通過我的 graphql 查詢中的資料進行映射后，我能夠控制臺出我想要的資料。多次映射后是否可以渲染？
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 的資料是一個物件陣列。然后我通過每個單獨的專案物件進行映射。之后，我將映射每個作為物件陣列的值......雖然我得到了 gatsby 影像資料的正確日志，但有沒有辦法以這種方式呈現它們？
uj5u.com熱心網友回復：
關于嵌套映射，您需要進行一些更改以從每個映射回傳正確的運算式：
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}
/>
</>
)
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/369866.html