如何为列表中的shimmer card子元素添加唯一的key属性？

你遇到的是React列表渲染的标准警告：列表中的每个子元素必须拥有唯一的key属性。你的Shimmer组件通过Array(15).fill("").map(...)生成了15个占位卡片，但未给每个卡片设置唯一key，因此触发了该警告。

以下是两种可行的解决方法：

方法一：使用map的索引作为key（适合静态占位场景） #

这种方式简单直接，完全适配Shimmer这种临时静态列表的需求：

return (
  <div className="restraunt-list" >
    {Array(15)
      .fill("")
      .map((e, index) => (
        <div key={index} className="shimmer-card"> </div>
      ))}
  </div>
);
};
export default Shimmer;

map函数的第二个参数是当前元素的索引，在这个静态列表中，每个索引都是唯一的，能满足React对唯一标识的要求。

方法二：生成唯一ID数组（更语义化的方式） #

如果之前尝试创建虚拟ID数组但失败，可能是用法有误，这里给出正确的实现：

// 生成带唯一标识的数组
const shimmerIds = Array.from({length:15}, (_, i) => `shimmer-card-${i}`);

return (
  <div className="restraunt-list" >
    {shimmerIds.map(id => (
      <div key={id} className="shimmer-card"> </div>
    ))}
  </div>
);
};
export default Shimmer;

通过Array.from直接构造包含唯一字符串的数组，遍历后将字符串作为key，比索引更具语义化，也避免了索引可能带来的潜在问题（不过Shimmer场景下索引方案已足够）。

注意：不要使用随机数作为key，组件重新渲染时随机数会变化，导致React频繁销毁重建子组件，影响性能。

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