警告：列表中的每个子项都应该有一个唯一的“key”道具。但id已经存在了

Question

我正在开发一个电子商务项目，我正在尝试将所有选定的产品放入图标中显示的购物车下拉列表中。我拿到了钥匙

id

，但它仍然要求我给每个孩子一个ID？

我究竟错在哪里？

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);

购物车商品

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;

[我在第一页映射的 data.json ]

[第二页]

Answer 1

如果购物车项目中的 ID 仍为您提供该答案，则该 ID 不得是唯一的。虽然这不是最好的选择，但您始终可以将索引添加到键中。如果该列表要更改，添加索引不是最佳实践。

{cartItems.map((cartItem, index) => (
     <CartItem key={index} item={cartItem}/>
    ))}

Answer 2

这可能是因为您的数据的 id 不唯一。 请尝试使用地图的索引值，如果没有错误，那么一定是id唯一的问题，请检查数组数据。