如何为我的地图功能想出一个好的密钥？

Question

我真的很难想出一个密钥，它给了我一个错误，我无法弄清楚。我已经尝试为 div 和 class 艺术家提供唯一 ID 这是正在显示的一个数据对象的样子：

{
  id: 1,
  title: "Hypervenom Phinish 'Volt'",
  price: "200",
  SizinginNumbers: true,
  img: "https://image.goat.com/transform/v1/attachments/product_template_pictures/images/013/255/557/original/749901_703.png.png?action=crop&width=950",
  color: "#cfeb30",
  size: null,
  itemcolor: null,
  catagory: "soccer",
  quantity:1
},

这是数据被映射出来的地方，购物车是我用来存储数据的状态。

<div className="cart">
            <h1>your Cart </h1>
            <h3>you have :{cart.length} item(s) </h3>
            {

            
            
            
            cart.map((item) => {
              return (
                <>
                  <ul  className="cartlist" style={{backgroundColor:item.color}}>
                    <li className="cartitem">x</li>

                    <li className="cartitem">
                      <img className="cartimgs" src={item.img} alt="" />
                    </li>
                    <li className="cartitem">{item.title}</li>
                    <li className="cartitem">Size: {item.size}</li>
                    <li className="cartitem">price: ${item.price}</li>

                    <button className="quantitybtn">-</button>
                    <span>{item.quantity}</span>
                    <button className="quantitybtn">+</button>
                  </ul>
                </>
              );
            })}


          </div>

这是我得到的错误 :

Answer 1

非常简单，只需删除反应片段并将键添加到 ul 元素即可。如果您没有唯一 ID，map 函数在第二个参数中有索引。

<div className="cart">
            <h1>your Cart </h1>
            <h3>you have :{cart.length} item(s) </h3>
            {

            cart.map((item, index) => {
              return (
                  <ul key={index}  className="cartlist" style={{backgroundColor:item.color}}>
                    <li className="cartitem">x</li>

                    <li className="cartitem">
                      <img className="cartimgs" src={item.img} alt="" />
                    </li>
                    <li className="cartitem">{item.title}</li>
                    <li className="cartitem">Size: {item.size}</li>
                    <li className="cartitem">price: ${item.price}</li>

                    <button className="quantitybtn">-</button>
                    <span>{item.quantity}</span>
                    <button className="quantitybtn">+</button>
                  </ul>
              );
            })}


          </div>

Answer 2

只需将键属性添加到您的组件 (HTML)，<>/> 不支持键或任何其他属性作为属性，因此请使用 React.fragment

<div className="cart">
  <h1>your Cart </h1>
  <h3>you have :{cart.length} item(s) </h3>
  {
    cart.map((item) => {
    return (
    <React.fragment key={index}>
      <ul className="cartlist" style={{backgroundColor:item.color}}>
        <li className="cartitem">x</li>

        <li className="cartitem">
          <img className="cartimgs" src={item.img} alt="" />
        </li>
        <li className="cartitem">{item.title}</li>
        <li className="cartitem">Size: {item.size}</li>
        <li className="cartitem">price: ${item.price}</li>

        <button className="quantitybtn">-</button>
        <span>{item.quantity}</span>
        <button className="quantitybtn">+</button>
      </ul>
    </React.fragment>
    );
  })}


</div>

如何为我的地图功能想出一个好的密钥？

how to come up with a good key for my map function?

javascript

json

reactjs