Warning: Each child in a list should have a unique “key” prop

前言

Bug:Warning: Each child in a list should have a unique “key” prop。你真的理解了吗？
相信很多人都是这样写代码的:
this.state.arr.map((item, index)=>{return <div key={index} ></div>})
如果这个组件数组不用涉及删除的话，你这样写是对的。但是如果涉及到删除其中的某个组件的话，就会出现不可思议的错误了。

背景：最近在用react开发时，有这样一个需求：数组中存储值，渲染前先将数组的值通过map函数引射为一个组件的数组，再对组件数组进行渲染。可是出现了这样一个很不可思议的错误：删除数组中非末尾的一个值时，组件实际渲染出来后不是想要的结果，也就是：本来应该删除掉的还在，而不应该被删除却被删除了。下面通过一个实例解释原因。

项目实例

渲染结果展示

1. 初始的样子
   解释：这六个组件，如果点击叉号的话就会删除对应的组件
   
   2.点击组件"1"时:我们可以看见：被删除并不是“1”，而是“6”！这跟我们预期不一致！
   

代码展示

1. 存储值的数组

    constructor(props){
   
        super(props);
        this.onCloseButtonClick = this.onCloseButtonClick.bind(this)