React警告：列表子元素需唯一key属性，Artist组件无列表却触发

你遇到的警告是React要求列表中的每个子元素必须有唯一的key属性，注意报错提示的是Track组件的render方法有问题，不是你贴出来的Artist组件——因为Artist是被Track组件渲染的，Track组件里肯定存在循环渲染列表的逻辑（比如用map遍历数组生成元素），只是你没贴Track的代码。

解决步骤：

• 找到Track组件中使用array.map()（或其他循环方式）生成子元素的代码段
• 给循环生成的每个最外层子元素添加唯一的key属性，key值要保证在同级元素中唯一，优先使用数据本身的唯一标识（比如id），如果没有也可以用索引（不推荐在列表会增删改的场景用索引）

举个示例：

// Track组件中错误的写法（没有key）
{artistList.map(artist => (
  <Artist artistName={artist.name} addAfter=", " />
))}

// 正确的写法（添加key）
{artistList.map(artist => (
  <Artist key={artist.id} artistName={artist.name} addAfter=", " />
))}

注意：key要加在循环生成的最外层元素上，而不是组件内部的元素里。

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