React中利用map批量渲染组件的key的唯一性

案例：

this.state={
  a: ['title', 'link', 'price']
}
...
const a = this.state.a
render(){
  return (
    {
      a.map((i, j) => (
        <div key={j} onClick={//点击后可删除该div，并同步修改state中a的值}>{i}}</div>
      ))
    }

上述代码只要不是从末尾删除，就会出现渲染出来结果与实际state中数据对不上的情况。具体表现为，无论删除哪一个div，渲染结果都是删除最后一个

原因：

通过console.log()可以发现state中的数据确实已经更改了，而UI中数据没变，说明前length-1个元素未重新渲染。那么唯一可能是，React 的 diff 算法在判是否需要重新渲染组件时将key作为了标准。由于上面代码是以数组元素的序号作为key的，所以在diff时判断发现数组中少了一个元素，而前面的元素key没有变化，所以前length-1个元素不会重新渲染。

结论：

所以在批量渲染组件时，key要设置为与内容唯一相关的信息，如 id 等主键