React 如何在嵌套数据对象中呈现动态图像

Question

通过我的 GraphQL 查询中的数据映射后，我可以 console.log() 我想要的数据。但是，嵌套的 .map 函数没有渲染我的 JSX。是否可以在嵌套 .maps 中呈现 JSX？

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.

调用嵌套对象时，我无法让 JSX 呈现

Answer 1

关于嵌套地图，您需要对 return 每个地图的正确表达式进行一些更改。控制台日志起作用的原因是代码仍在循环；但是，没有表达式是 return 从地图中编辑出来供 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}
            />
          </>
        )
      })

React 如何在嵌套数据对象中呈现动态图像

React how to render dynamic images inside nested data objects

reactjs

contentful

graphql