概述
作为一个上手极其简单，但具有高颜值的组件，Ant Design在前端开发中占据着一席之地，成为很多前端开发者的首选。
官网参考Ant Design Table，本文记录在使用时遇到的问题和踩过的坑。
问题
本文记录在使用React Ant Design的table组件时，遇到的两个表象相同，但是根源不太相同的问题。
问题1
一个简单的列表页，输入主键ID搜索，却展示出来两条数据。通过查看接口，明明只返回一条数据。怎么会展示两条数据呢？
并且下面这一条数据，无法操作。这也正说明，后端返回的数据里面是不包含这一条。
此时如果指定主键输入1281搜索，发现上面列表页的问题稳定复现：
问题定位为前端，前端页面展示列表时使用的Table组件为使用React Ant Design Table。鉴于自己是个半吊子前端开发。请教其他比较资深的前端同事，让检查一下rowKey：
<section className={styles.listForm}>
<ViTable
className={styles.datasetTable}
rowKey={(record: DatasetItem) => record.datasetId + (record.cronExpStatus ?? 'n')}
columns={columns}
dataSource={datasetState.list}
loading={listLoading}
pagination={{
position: ['bottomCenter'],
total: datasetState.pagination?.total,
showSizeChanger:true,
showQuickJumper:true,
showTotal:(total: any) => (`共 ${total} 条`),
}}
onChange={handleTableChange}
/>
</section>
发现这里定义的rowKey居然和cronExpStatus有关联，理论上一条数据只有一个cronExpStatus，两者拼接没有任何实际的业务意义。rowKey应该是后端返回数据里面，表示主键ID那一个字段。
改成如下：rowKey={(record: DatasetItem) => record.datasetId}，问题得到修复。
问题2
半个月后，另一个列表页再次出现类似问题：
相同问题，右侧的操作按钮点击没有反应。
第一反应就是去检查一下前端代码，使用正确的rowKey，没有问题：
rowKey={(record: any) => record.id}
再次请教资深前端开发。尝试如下解决方案：
rowKey={(record: any, index: number) => `${record.id}${index}`}
问题解决。
结论
rowKey的定义：Row's unique key, could be a string or function that returns a string，类型是string | function(record): string。
- 维护他人随手乱写随手提交的代码，真痛苦。这种无意之中的脏代码，让后来的维护者，不知道要浪费多少时间去排查问题。
- 不吝请教。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/142149.html
