React Redux嵌套组件添加key后仍报列表子元素需唯一key属性错误

问题根源 #

1. ProductLine组件存在多余的connect高阶组件包装：当前ProductLine没有用到Redux全局状态，仅使用父组件传递的item属性，通过connect从ownProps取item属于无效操作，反而会引入react-redux的浅比较逻辑，导致属性更新不触发组件重渲染。
2. Key属性异常：要么basket.items数组中存在重复的sku值，导致key重复；要么冗余的connect包装引发属性透传异常，同时如果Redux的basket reducer直接修改原数组而非返回新数组，也会导致列表不更新、key校验异常。

修复步骤 #

1. 移除ProductLine多余的connect包装 #

修改后的ProductLine组件代码如下：

function ProductLine({ item }) {
    return (
        <Container>
            <Row className="mb-2">
                <Col md={5}>{item.name}</Col>
            </Row>
        </Container>
    )
}

export default ProductLine

如果后续需要在ProductLine中访问Redux全局状态，可以再恢复connect，此时只要保证父组件传递的key唯一即可正常生效。

2. 校验sku唯一性 #

可以先临时把列表渲染的key替换为数组索引测试：

{basket.items.map((item, index) => (
    <ProductLine key={index} item={item} />
))}

如果替换后key报错消失，说明你的basket.items中存在重复的sku值，需要排查数据生成/更新逻辑保证sku全局唯一，确认后换回item.sku作为key即可。

3. 检查Redux reducer逻辑 #

修改basket对应的reducer代码，保证更新购物车时始终返回全新的数组引用，禁止直接修改原state：

// 错误写法（直接修改原数组）
case 'ADD_ITEM':
  state.basket.items.push(action.payload);
  return state;

// 正确写法（返回新数组）
case 'ADD_ITEM':
  return {
    ...state,
    basket: {
      ...state.basket,
      items: [...state.basket.items, action.payload]
    }
  };

修复完成后重启开发服务清空缓存即可解决报错和内容不更新问题。

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