React如何渲染嵌套数据对象内的动态图片 嵌套map不渲染JSX怎么办

• 嵌套.map完全支持返回并渲染JSX，不渲染的核心原因是每一层.map的回调函数都缺失return语句：你仅在最内层的map中返回了<GatsbyImage>组件，外层两层map没有把内部遍历的结果返回，最终最外层map返回的是全undefined的数组，因此没有内容被渲染。
• React列表渲染要求每个列表项必须绑定唯一的key属性，否则会抛出运行时警告，你的代码也缺少该配置。

显式返回写法（和你原代码风格一致） #

import React from 'react'
import { GatsbyImage } from "gatsby-plugin-image"
import Layout from '你的Layout组件路径'

const NikonGallery = ({ data }) => {
  return (
    <Layout>
      {data.allFiles.nodes.map((item, itemIdx) => {
        // 外层map新增return，返回内层遍历结果
        return Object.entries(item).map(([key, value], entryIdx) => {
          // 中层map新增return，返回图片遍历结果
          return value.map((image) => {
            console.log("Individual image", image)
            // 优先用image的唯一字段作为key，比如image.id，没有再用索引拼接
            return ( 
              <GatsbyImage
                key={image.id || `${itemIdx}-${entryIdx}-${image.name}`}
                image={image.gatsbyImageData}
                alt={image.description}
              />
            )
          })
        })
      })}
    </Layout>
  )
}

export default NikonGallery

隐式返回简化写法 #

箭头函数如果只有返回逻辑，可以去掉大括号和return关键字，用隐式返回简化代码：

import React from 'react'
import { GatsbyImage } from "gatsby-plugin-image"
import Layout from '你的Layout组件路径'

const NikonGallery = ({ data }) => {
  return (
    <Layout>
      {data.allFiles.nodes.map((item, itemIdx) => 
        Object.entries(item).map(([key, value], entryIdx) => 
          value.map((image) => (
            <GatsbyImage
              key={image.id || `${itemIdx}-${entryIdx}-${image.name}`}
              image={image.gatsbyImageData}
              alt={image.description}
            />
          ))
        )
      )}
    </Layout>
  )
}

export default NikonGallery

内容的提问来源于stack exchange，提问作者Alex Virdee