react异常 Each child in a list should have a unique “key” prop

Posted 2020-12-16 kybs0

react异常警告：Each child in a list should have a unique “key” prop

原因：Dom在渲染数组时，需要一个key，不然嵌套数组时会引起歧义

解决：

1   <div className="classlist-contaier">
2     {this.state.classList.map((item, index) => {
3       return <ClassItem key={index}/>;
4     })}
5   </div>

另外，如果遍历添加组件时，在组件外再加个div之类的容器，那么key需要在上层添加。比如：

1   <div className="classlist-contaier">
2     {this.state.classList.map((item, index) => {
3       return (
4         <div key={index}>
5           <ClassItem/>
6         </div>
7       );
8     })}
9   </div>