React分页组件出现唯一key属性警告，求解决方案

嘿，我一眼就找到问题所在啦！你确实在IssueOverview里给循环生成的Issue组件加了唯一key，但警告其实来自你的Pagination组件——你在那里循环渲染页码元素时，没给每个子元素加key属性。

看你的Pagination代码，你通过pageNumbers.map(number => ...)生成了一组页码<div className="pagination">元素，但React要求列表中的每个子元素都必须有唯一的key，用来帮助它追踪元素变化、高效更新DOM。

只需要给循环里的<div>加上key就行，这里用页码number作为key就很合适，因为每个页码都是唯一的：

class Pagination extends React.Component {
  render(){
    const { totalItems, limit, currentPage} = this.props.pagination;
    const totalPages = Math.ceil(totalItems / limit);
    const pageNumbers = [...Array(totalPages).keys()].map(x => x + 1);
    return pageNumbers.map(number => {
      return (
        // 添加唯一key属性，用页码number作为标识
        <div className="pagination" key={number}>
          <a onClick={() => this.props.changePage(number)}>{number}</a>
        </div>
      )
    })
  }
}

简单解释下：React对key的要求是在当前列表范围内唯一，不需要全局唯一。这里的页码number正好满足这个条件，所以完全可以用它来当key。

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