理解React.js中unique key prop：订单摘要页面列表key报错咨询

你遇到的是React列表渲染的典型key属性警告，触发原因是SummaryOrder.js中cartItems.map遍历返回的子元素绑定的key值不唯一：

1. 当前代码使用item.item.createdAt作为key，createdAt为商品创建时间戳，同一时间创建的多个商品会出现重复值
2. 若item.item中不存在createdAt字段，会导致所有子元素的key都为undefined，必然触发重复警告
3. 从PreOrderScreen.js的逻辑可以看到每个商品本身具备唯一标识字段_id，无需使用稳定性不足的时间戳作为key

直接替换SummaryOrder.js中map遍历的key值为商品唯一ID_id即可，修改后的代码如下：

// SummaryOrder.js 对应map逻辑
{cartItems.map((item) => {
  return (
    <View key={item.item._id}>
      <PreOrderItem item={item} />
    </View>
  );
})}

如果你的业务逻辑中允许cartItems出现相同_id的商品条目，可以拼接索引保证唯一（不推荐仅用索引作为key，会影响列表重排时的渲染性能）：

{cartItems.map((item, index) => {
  return (
    <View key={`${item.item._id}_${index}`}>
      <PreOrderItem item={item} />
    </View>
  );
})}

若修改后警告仍存在，请检查PreOrderItem组件内部的列表渲染逻辑，确认所有通过遍历生成的子元素都绑定了唯一key。

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