已添加key属性仍触发React列表子项唯一key警告，求排查原因

你已经给外层rants.map的容器设置了key={rant.id}，但控制台仍出现警告，问题出在内层的categories.map循环——这段循环生成的<small>元素没有添加唯一的key属性。

React要求所有通过map()生成的列表子项都必须有唯一key，不管嵌套多少层。你的代码里，外层循环的key没问题，但内层遍历分类的循环缺少key，所以浏览器会抛出这个警告。

修复方法很简单，给内层循环的<small>元素加上key，优先用分类的唯一标识（比如id），如果slug全局唯一也可以用slug：

{rant.categories.map((category) => (
  <small 
    key={category.id} // 或 key={category.slug}，确保值全局唯一
    className="post-archive-meta-details-name"
  >
    <Link className="post-archive-meta-details-name text-dark font-weight-bold" to={`/category/${category.slug}`}>
      #{category.slug} 
    </Link>
  </small>
))}

另外还要注意两个隐藏坑：

• 确保你用来做key的字段（比如rant.id、category.id）是全局唯一的，不能有重复值
• 不要用数组索引index作为key，尤其是列表项可能被排序、新增或删除的场景，这会导致React渲染异常

内容的提问来源于stack exchange，提问作者Vicente Antonio G. Reyes