rowKey的作用是什么？
rowKey是Ant Design的Table组件的一个重要属性，用于指定每一行数据的唯一标识符。对于Table组件来说，dataSource和columns这两个属性中都要包含key属性，否则就需要在
组件中指定rowKey属性。
回顾前面两篇文章中的代码，可以看到我们为columns中的每一列都指定了一个key属性，但是对于dataSource中的每一行数据，我们并没有指定key属性。这会导致一个控制台警告，如果大家细心的话，可能已经发现了这个警告：
1
| index.js:1 Warning: Each child in a list should have a unique "key" prop.
|
这个警告信息非常之多，这里有一个窍门可以快速定位到问题所在，那就是找到at Table这一行，然后再下面一行就是是错误发生的组件，比如下面这个警告信息，它表示错误发生在User组件中：
如何指定rowKey？
为dataSource指定唯一标识符
找到错误之后，修复就简单了，由前面的介绍可知，修复这个警告有两种方式：
- 在
dataSource中的每一行数据中添加一个唯一的key属性。
- 在
<Table>组件中指定rowKey属性。
这里我们采用第二种，因为这样可以避免在dataSource每一行数据中都添加key属性，代码更简洁。我们可以将Table组件的rowKey设置为用户ID即可。
1
2
3
4
5
6
| <Table
loading={loading}
dataSource={tableData}
columns={columns}
rowKey={(record) => record.id}>
</Table>
|
也可以简写成下面的形式，只要确保你的dataSource中的每一行数据都有一个唯一的id属性即可。Ant Design会自动使用这个id作为每一行的唯一标识符。上面的函数形式主要是为了兼容数据源中没有id属性的情况。可以通过函数生成一个唯一标识供Table使用。
1
2
3
4
5
6
| <Table
loading={loading}
dataSource={tableData}
columns={columns}
rowKey="id">
</Table>
|
需要注意的是：不要使用数组下标作rowKey，因为在数据发生变化时，数组下标会发生变化，导致React无法正确识别哪些数据发生了变化，从而引发渲染问题。
1
| rowKey={(record, index) => index}
|
为columns指定唯一标识符
columns只能在定义的时候指定key属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
| const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
];
|
总结
React要求数组中的每个元素都要有一个唯标识（默认是key属性），其底层原因是为了Diff算法能够高效地比较和更新组件。Ant Design的Table组件也遵循了这个原则，我们可以通过如下几种方式来指定每一行数据的唯一标识符：
为dataSource指定唯一标识符
- 在
dataSource中的每一行数据中添加一个唯一的key属性。
- 在Table组件中指定
rowKey属性，可以是一个字符串（表示数据源中每一行数据的唯一标识符）或者一个函数（返回每一行数据的唯一标识符）。
为columns指定唯一标识符
对于columns来说，必须在定义时指定一个唯一的key属性，因为Table组件的rowKey只作用于dataSource，而不作用于columns。