React中map函数遍历异常，仅显示单张图片的问题求助

问题 #

我编写了如下React组件，通过Apollo Client调用GraphQL接口获取商品数据。在使用嵌套map函数遍历categories和products时，发现仅能获取每个数组的第一个元素：例如某PlayStation产品有5张图片，但网页仅显示1张。请帮忙排查代码是否存在缺失或需要调整的地方，相关代码及GraphQL数据结构如下：

组件代码 #

import React from 'react'
import { gql, useQuery } from '@apollo/client';
import { Image } from 'antd';
import { useState } from 'react';

const GET_TECH = gql`
query AllItem{
 categories{
  name
  products{
    name
    brand
    attributes{
      name
      id
    }
    gallery
    category
    prices{
      currency{
        label
        symbol
      }
      amount
    }
    inStock
    description
  }
}
}
`;


function Tech() {
  const { loading, error, data } = useQuery(GET_TECH);
  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  console.log(data);
  return (
    <div className='pageLayout'>
  {
     (data.categories).map((item,index) => {
    //const {name,brand,description,gallery,category} = item;
        {
      return (item.products).map((itemPrdct,subIndex) => {
    
        const {name,brand,description,gallery,category} = itemPrdct; 
          if(category === "tech"){
            console.log(name)
            return(
             <div className="tech" key = {subIndex}>
                <p className='nametag' >{brand}</p> 
                <Image width={200} src={gallery}  className='gallery'/>
               </div>
              )        
         }
        })
        
      }
    })
    
  }
    </div>
  )
}

export default Tech

GraphQL数据结构示例 #

{
  "data": {
    "categories": [
      {
        "name": "all",
        "products": [
          {
            "name": "Nike Air Huarache Le",
            "brand": "Nike x Stussy",
            "attributes": [
              {
                "name": "Size",
                "id": "Size"
              }
            ],
            "gallery": [
              "https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_2_720x.jpg?v=1612816087",
              "https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_1_720x.jpg?v=1612816087",
              "https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_3_720x.jpg?v=1612816087",
              "https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_5_720x.jpg?v=1612816087",
              "https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_4_720x.jpg?v=1612816087"
            ]
          }
        ]
      }
    ]
  }
}

问题排查与解决 #

问题1：多余花括号干扰渲染逻辑 #

在categories.map的回调函数中，你额外嵌套了一对不必要的花括号，这会破坏遍历结果的正常返回逻辑，导致仅能渲染出第一个元素。需要直接返回products.map的结果，去掉多余的花括号。

问题2：未遍历gallery数组 #

gallery是一个包含多张图片URL的数组，直接将数组传给Image组件的src属性时，组件只会读取数组的第一个元素。需要新增一层map遍历gallery数组，渲染所有图片。

问题3：key值稳定性优化 #

原代码使用索引subIndex作为key，在数组元素顺序变化时可能引发不必要的渲染异常，建议使用产品名称+图片URL的组合作为唯一key，保证渲染稳定性。

修改后的完整代码 #

import React from 'react'
import { gql, useQuery } from '@apollo/client';
import { Image } from 'antd';

const GET_TECH = gql`
query AllItem{
 categories{
  name
  products{
    name
    brand
    attributes{
      name
      id
    }
    gallery
    category
    prices{
      currency{
        label
        symbol
      }
      amount
    }
    inStock
    description
  }
}
}
`;

function Tech() {
  const { loading, error, data } = useQuery(GET_TECH);
  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <div className='pageLayout'>
      {data.categories.map((category) => 
        category.products.map((product) => {
          if (product.category === "tech") {
            return (
              <div className="tech" key={product.name}>
                <p className='nametag' >{product.brand}</p>
                {/* 遍历gallery数组渲染所有图片 */}
                {product.gallery.map((imgUrl) => 
                  <Image width={200} src={imgUrl} className='gallery' key={`${product.name}-${imgUrl}`}/>
                )}
              </div>
            )        
          }
          return null;
        })
      )}
    </div>
  )
}

export default Tech

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