React嵌套JSON图片加载异常：图片生成独立Accordion问题

核心问题原因 #

你渲染时把图片的遍历逻辑放到了Accordion组件的外部层级，导致每张图片都被单独包裹成新的Accordion，而非作为对应面板内容的一部分。

修正后的JSX代码 #

把图片的遍历嵌套在对应Accordion的内容区域内，示例如下：

// 假设你的JSON数据存在data变量中
{data.map((panelItem) => (
  <Accordion key={panelItem.id}>
    <Accordion.Header>{panelItem.title}</Accordion.Header>
    <Accordion.Body>
      {/* 先渲染面板的文本内容 */}
      <p>{panelItem.description}</p>
      {/* 再渲染当前面板关联的图片组 */}
      <div className="panel-images">
        {panelItem.images.map((img) => (
          <img
            key={img.id}
            src={img.url}
            alt={img.alt || panelItem.title}
            style={{ maxWidth: '100%', margin: '8px 0' }}
          />
        ))}
      </div>
    </Accordion.Body>
  </Accordion>
))}

匹配的JSON结构要求 #

确保你的JSON中每个折叠面板项包含嵌套的images数组，示例结构：

[
  {
    "id": "panel-1",
    "title": "产品A介绍",
    "description": "这是产品A的详细说明内容",
    "images": [
      {
        "id": "img-a-1",
        "url": "/assets/product-a-1.jpg",
        "alt": "产品A外观"
      },
      {
        "id": "img-a-2",
        "url": "/assets/product-a-2.jpg",
        "alt": "产品A细节"
      }
    ]
  },
  {
    "id": "panel-2",
    "title": "产品B介绍",
    "description": "这是产品B的详细说明内容",
    "images": [
      {
        "id": "img-b-1",
        "url": "/assets/product-b-1.jpg",
        "alt": "产品B外观"
      }
    ]
  }
]

关键注意点 #

• 必须给每个循环项（包括Accordion和图片）设置唯一的key属性，避免React渲染警告
• 如果是本地图片资源，确保URL路径正确：public目录下的资源直接写相对路径，src目录下的资源需要用require()导入（比如src={require(img.url)}）
• 可以通过CSS类或内联样式控制图片的排版，避免图片溢出面板

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