Ant Design rowKey导致的诡异重复、无效数据问题

概述

作为一个上手极其简单，但具有高颜值的组件，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。

1. 维护他人随手乱写随手提交的代码，真痛苦。这种无意之中的脏代码，让后来的维护者，不知道要浪费多少时间去排查问题。
2. 不吝请教。