[JavaScript知识库]React + Antd 填坑（二）使用 Antd 中的 Table 组件 key 值报错

简述

这篇文章主要是讲解React + Antd 项目中遇到的一些常见错误以及解决方案，算是这个系列中的第一篇填坑文。
算是给自己留个笔记，如今分享出来呢，是希望给有需要的同学一些帮助，如有不完善请多多谅解。

问题

问题：Warning: Each child in a list should have a unique “key” prop.
场景：使用 Antd 中的 Table 组件

关于上面这个问题，首先翻译一下，就是说：“ 循环中的每一个子对象必须有一个唯一的Key属性 ”。
之所以出现上面的这个问题，一般是由于对 Antd 的 table 不熟悉造成的，混淆了 Column 中的 key 和此处报错的 key。

例如：

const myColumns: any = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
  ];
  
const dataSource:any[] = []
  
<Table dataSource={dataSource} columns={myColumns} />;

一般情况下都会以为这个key可以当做循环中所设置的key值，那是想当然，不但是你想错了，我也想错了，看完官方文档发现这完全就不是那么一回事。

官方关于这里的解释也很直接：

React 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性

那么问题出在哪儿呢？我也不知道！
那还是还是看官方文档吧！
你会发现在 Table 的API中有这么一个属性 rowKay。

注解：rowKey 表格行 key 的取值，可以是字符串或一个函数
类型：string | function(record): string
默认值：key

这个值才是真正 tbody 中数据循环中需要设置的key值。

问题找到了就上解决方案。

解决方案

<Table
	// 表格行 key 的取值，可以是字符串或一个函数
   	rowKey={record => record.id}
/>;

加单吧，确实，就是这么简单的一句话。

注解

数据要进行循环遍历需要设置key值，那么为什么要设置这个Key值呢？
因为React 在解析 JSX 语法模板的时候会生成虚拟DOM节点，虚拟DOM中就要使用到这个Key，这也是新旧虚拟DOM节点进行比对的重要数据之一，算是 Diff 算法中的一种规则。
如果有兴趣的可以去了解一下虚拟DOM，可以去 github 上看一下 snabbdom，这个算是diff算法的鼻祖，Vue的源码就借鉴了snabbdom【snabbdom】。