React中已设置key仍触发唯一key属性警告的原因咨询

兄弟，问题就出在你选的Date.now()这个key上！React对列表元素的key有两个核心要求：唯一且稳定，而Date.now()完全踩中了这两个雷区，具体原因如下：

1. 同一渲染周期内可能生成重复key
   JavaScript的循环执行速度快到离谱——很多时候整个列表的循环渲染都能在同一个毫秒内完成。这就意味着多个<li>元素会拿到完全相同的Date.now()值当key，直接违反了"每个子元素必须有唯一key"的规则，这就是警告弹出的直接原因。

2. 不稳定的key会彻底浪费React的渲染优化
   就算运气好单次渲染里每个key都不重复，Date.now()在组件每次重渲染时都会生成新的时间戳。React依赖key来识别"哪些元素是同一个、可以复用DOM节点"，每次重渲染都换key的话，React会把所有<li>都当成全新元素重新创建DOM，不仅丢了性能优化，甚至可能引发渲染异常。

正确的key选择方案 #

• 优先用数据自带的唯一标识：如果是后端返回的数据，直接用id这类天然唯一的字段当key，这是最优解。
• 本地临时数据可用计数器/哈希值：如果是前端生成的临时列表，可以用递增的计数器，或者对元素内容做哈希生成稳定唯一的key。
• 临时兜底用索引（谨慎使用）：如果以上都没有，列表又不会有排序、增删操作，可以用循环的index当key，但列表变动时会有渲染问题，只适合临时场景。

举个正确的示例：
假设你的列表数据结构是这样的：

const todoItems = [
  { id: 1, value: '买早餐', completed: false },
  { id: 2, value: '修复bug', completed: true }
];

渲染时用数据的id作为key：

return todoItems.map(item => (
  <li onClick={this.handleOnMarkAsCompleted} key={item.id}>
    { item.completed ? <b>{item.value}</b> : item.value }
  </li>
));

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