React 如何在嵌套数据对象中渲染动态图像

Posted 2023-03-08

【中文标题】React 如何在嵌套数据对象中渲染动态图像

【英文标题】：React how to render dynamic images inside nested data objects

【发布时间】：2022-01-06 18:48:12

【问题描述】：

通过我的 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 渲染。

【参考方案1】：

关于嵌套地图，您需要进行一些更改以从每个地图返回正确的表达式。控制台日志起作用的原因是代码仍然循环；但是，地图没有返回任何表达式供 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
            />
          </>
        )
      )

【讨论】：

尝试一下似乎没有输出它们。来自docsgetImage是一个可选的帮助函数，使其更易于阅读。不过，我可能错了。

@AlexVirdee 请发布您的 grapql 查询。如果这不能解决问题，那么您的问题必须存在于查询中。请记住，您不能在未解析和未转换的图像上使用 GatsbyImage 组件。

没问题感谢您的帮助！刚刚编辑了帖子以包含 graphql 查询

@AlexVirdee 您需要在查询中使用 childImageSharp 以及获取文件系统。而不是我重新发明***，我只会 point you here 如果这没有帮助让我知道，我会帮助了解它的底部。

非常感谢您的帮助，我在周末尝试但没有成功。将此标记为正确！