React列表已设key仍报Each child in a list needs unique 'key'警告如何解决

问题原因 #

你在List组件中为<PokemonItem />设置的key属性没有问题，控制台警告来源于PokemonItem组件内部的类型遍历逻辑：你调用pokemon.types.map()渲染类型标签时，返回的<div className="type">元素没有设置唯一key属性，这是React中所有数组渲染都需要遵守的规则，不止是外层列表。

解决方案 #

由于单个宝可梦的属性类型不会重复，直接用类型值作为key即可，修改对应代码段：

{pokemon.types.map((type) => {
  return <div key={type} className="type">{type}</div>;
})}

如果存在小概率同类型重复的特殊场景，也可以用数组下标作为兜底（仅在列表不会动态排序/增删时使用）：

{pokemon.types.map((type, index) => {
  return <div key={index} className="type">{type}</div>;
})}

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