如何理解 "Each child in an array should have a unique "key" prop. " ?

#1

代码如下…这个一个输出列表并直接输出页码的render
但 {pages} 这个输出时 有带key 属性的,但还是报 Each child in an array should have a unique “key” prop. 的错误.
但使用内联map 输出 标签时,有带key 倒没有问题
到底 Each child in an array should have a unique “key” prop. 这个问题是怎样理解的呢?

render(){
  var data = this.state.data;

  var pages = []
  for(var index = 1 ;index<=this.state.pages;index++){
    pages.push(<div key={index+1}>{index}</div>);
  }

   return(
    <div>
     {
        this.state.data.map(function(e,index){
          return (
            <div>
              <div key={e.objectId} >{e.name}</div>
            </div>
          )
        })
     }
     <div>{pages}</div>
    </div>
   );
}
#2

我也很奇怪,可能和重新渲染dom的时候的位置或者排序等有关吧。

#3

发现 是不能嵌套标签的,得要在return 的的父标签里加入 key 的

#4

key是在componentUpdate的时候做数据diff用的,key最好不要用index!!!