React组件渲染报错：数组子元素需唯一key属性（Abstractfactory）

这个警告是React在提示你：当你渲染数组或迭代器里的子元素时，每个元素都需要一个唯一的key属性，这样React才能准确追踪每个元素的变化，优化DOM更新效率。

看你的代码，问题出在render方法里的这一段：

{this.state.items.map( i => (<div>i.id</div>))}

这里有两个小问题：

• 没有给每个生成的<div>元素添加key属性
• 你想渲染i.id的实际值，但现在写的是字符串"i.id"，不会显示客户的真实id

修正方案 #

把这段代码改成下面这样：

{this.state.items.map(i => (
  <div key={i.id}>
    {i.id}
  </div>
))}

关键点说明 #

• key的选择：这里用i.id作为key是最佳选择，因为id是每个Customer对象的唯一标识，符合React对key的要求——稳定、唯一、可预测。尽量不要用数组的索引作为key，尤其是当列表可能会有增删、排序操作时，索引会导致React识别元素出错。
• 插值语法：React中要渲染变量的值，必须用{}包裹，所以把i.id改成{i.id}才能正确显示客户的id。

这样修改后，那个警告就会消失，同时也能正确渲染出每个客户的id啦。

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