React列表key属性异常：已设key仍报错，移除rating则警告消失

问题根源 #

你给外层列表元素加了唯一key，但ratings函数生成的星级评分（SVG元素）属于列表的子元素集合，这些动态生成的重复元素没设置自己的唯一key，React遍历检查时就会触发警告。注释掉rating属性后，这些内层动态元素消失，警告自然就没了。

修复步骤 #

1. 给ratings函数返回的每个重复元素加唯一key
   比如函数里如果是循环生成星级SVG，要给每个SVG加key：

function ratings(ratingValue) {
  return Array.from({length: 5}).map((_, starIndex) => (
    <svg key={`star-${starIndex}`} className="star-icon">
      {/* 星级相关的SVG内容 */}
    </svg>
  ));
}

如果你的评分逻辑里有更独特的标识（比如对应数据项的ID加星级索引），优先用这种组合作为key，比单纯用index更稳定，避免列表排序变化时出现渲染异常。

2. 确认外层列表的key确实唯一且稳定
   外层元素的key最好用数据项的唯一ID（比如item.id），不要用循环的index，除非你的数据永远不会重新排序、增删。

验证方式 #

修改完重新运行项目，打开控制台看警告是否消失。如果还有，用React DevTools检查列表的子元素结构，找到没加key的重复元素，补上即可。

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