React函数组件对象props传参问题：二次渲染brand值为undefined

问题场景 #

现有DataShirts数组数据，在Home.js中通过map遍历渲染ProductCard组件并传递item对象作为props；ProductCard组件首次渲染能正常打印item.brand，但二次渲染时该值为undefined。

相关代码 #

数据定义

export const DataShirts = [
    {
        type:"tshirt",
        brand:"Levis"
    },
    {
        type:"tshirt",
        brand:"Duke"
    }
]

Home.js传参代码

{ data && data.length > 0 ? data?.map((item,index) => {
    return <Grid key={index} item xs={6} md={3}> <ProductCard item={item} /> </Grid>}) : null}

ProductCard.js组件代码

const ProductCard = ({item}) => {
    
    console.log(item.brand)   // 二次渲染时返回undefined
    return (
        <>

        </>
    )
}

错误原因分析 #

1. 使用index作为组件key的隐患：
   React依赖key识别组件实例的唯一性。用数组index作为key时，若数组数据变动（新增、删除、排序），React会错误复用旧组件实例，导致props更新不匹配。即便当前数组数据未修改，父组件重渲染时，index作为固定标识可能让React误判组件身份，引发props传递异常，出现二次渲染时item.brand为undefined的情况。

2. 组件二次渲染的触发原因：
   父组件Home.js的重渲染会带动子组件ProductCard重渲染，常见触发场景包括：

• data来自异步请求，首次渲染用初始空值/占位数据，请求完成后data更新触发重渲染；
• 父组件自身其他状态（如筛选条件、布局状态）变化，触发组件树重渲染。

修复方案 #

1. 使用唯一标识作为key #

给数组每个元素添加唯一id字段，替换index作为组件的key，确保React能正确识别组件实例：

// 修改后的数据定义
export const DataShirts = [
    {
        id: 1,
        type:"tshirt",
        brand:"Levis"
    },
    {
        id: 2,
        type:"tshirt",
        brand:"Duke"
    }
]

// Home.js中更新key的使用
{ data && data.length > 0 ? data?.map((item) => {
    return <Grid key={item.id} item xs={6} md={3}> <ProductCard item={item} /> </Grid>}) : null}

2. 添加props空值保护 #

在ProductCard组件中对item做默认值或可选链处理，避免因props异常导致报错：

const ProductCard = ({item = {}}) => {
    console.log(item?.brand)
    return (
        <>
        </>
    )
}

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