React列表key警告求助：已设id仍触发唯一key属性提示

收到警告：Warning: Each child in a list should have a unique "key" prop. but the id is already exist

在电商项目中，购物车下拉菜单展示选中商品时，已给循环渲染的CartItem组件设置key={cartItem.id}，但仍触发上述key重复警告，求问题原因及解决方法。

相关代码 #

CartDropDown组件

import React from "react";
import { connect } from "react-redux";
import CustomButton from "../custom-button/custom-button.cpn";
import CartItem from "../cart-item/cart-item.cpn";
import "./cart-dropdown.styles.scss";

const CartDropDown = ({ cartItems }) => (
  <div className="cart-dropdown">
    <div className="cart-items">
      {cartItems.map((cartItem) => (
        <CartItem key={cartItem.id} item={cartItem}/>
      ))}
    </div>
    <CustomButton>Go to checkout</CustomButton>
  </div>
);

const mapStateToProps = ({ cart: { cartItems } }) => ({
  cartItems
});

export default connect(mapStateToProps)(CartDropDown);

CartItem组件

import React from "react";
import "./cart-item.style.scss";

const CartItem = ({ item: { imageUrl, price, name, quantity } }) => (
  <div className="cart-item">
    <img src={imageUrl} alt="item" />
    <div className="item-details">
      <span className="name">{name}</span>
      <span className="price">
        {quantity} x ${price}
      </span>
    </div>
  </div>
);

export default CartItem;

问题分析与解决方法 #

• 核心原因：你的cartItems数组里存在id完全相同的多个元素。正常电商购物车逻辑中，同一个商品多次加入时应该是更新对应条目的quantity字段，而不是新增一条id重复的记录。如果数组里有重复id的对象，React就会判定key重复，触发警告。
• 快速验证：在CartDropDown组件里添加日志，检查重复id：

  const CartDropDown = ({ cartItems }) => {
    // 打印所有id并检测重复
    const itemIds = cartItems.map(item => item.id);
    const duplicateIds = [...new Set(itemIds.filter((id, idx) => itemIds.indexOf(id) !== idx))];
    console.log('重复的商品id:', duplicateIds);
    
    return (
      // 原组件内容
    )
  }
  

• 解决办法：
  1. 根源修正（推荐）：修改购物车的添加逻辑——当用户添加已存在的商品时，找到数组中对应id的条目，增加它的quantity值，而不是往数组里push新的重复id对象。这不仅解决key问题，也符合购物车的常规交互逻辑。
  2. 临时替代方案：如果暂时无法修改购物车逻辑，可以用key={${cartItem.id}-${index}}，把商品id和数组索引结合作为唯一key。但这种方式会降低React列表渲染的性能，因为索引会随列表变化而改变，不推荐长期使用。

内容的提问来源于stack exchange，提问作者Az-eddine blidi