React中map渲染列表如何设置合适key解决报错

问题场景 #

使用map函数渲染购物车列表时触发key缺失报错，尝试给类名为artist的div设置唯一id未解决问题。
单条购物车数据结构示例：

{
  id: 1,
  title: "Hypervenom Phinish 'Volt'",
  price: "200",
  SizinginNumbers: true,
  img: "https://example.com/product-image.png",
  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>

报错原因 #

• React列表渲染要求map回调返回的最外层直接根元素必须绑定稳定、唯一的key属性，key加在内部子元素上不会被识别。
• 上述代码用空Fragment简写<></>作为循环返回的根节点，这种简写语法不支持传入任何属性（包括key），因此始终无法满足key绑定要求。

修复方案 #

方案1（推荐，适配当前场景） #

当前代码里的空Fragment只包裹了单个ul元素，属于冗余嵌套，直接删除空Fragment，将key绑定在ul上即可：

<div className="cart">
  <h1>your Cart </h1>
  <h3>you have :{cart.length} item(s) </h3>
  {
    cart.map((item) => {
      return (
        <ul 
          key={item.id}
          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>

方案2（需要多平级根节点时使用） #

如果确实需要用Fragment包裹多个平级元素作为循环返回的根节点，不能使用简写语法，需要导入具名Fragment组件后绑定key：

import { Fragment } from 'react';

// 组件内渲染逻辑
<div className="cart">
  <h1>your Cart </h1>
  <h3>you have :{cart.length} item(s) </h3>
  {
    cart.map((item) => {
      return (
        <Fragment key={item.id}>
          <ul className="cartlist" style={{backgroundColor:item.color}}>
            {/* 列表项内容和之前一致 */}
          </ul>
          {/* 其他平级根元素写在这里 */}
        </Fragment>
      );
    })}
</div>

注意：不要使用循环索引index作为key，除非列表完全静态、无增删/排序/过滤操作，否则会引发组件状态错乱、渲染异常问题。当前数据自带唯一id字段，直接用item.id作为key是最优选择。

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