Ant Design rowKey導緻的詭異重複、無效資料問題

問題

本文記錄在使用React Ant Design的table元件時，遇到的兩個表象相同，但是根源不太相同的問題。

問題1

簡單的清單頁，輸入主鍵ID搜尋，卻展示出來兩條資料。通過檢視接口，明明隻傳回一條資料。怎麼會展示兩條資料呢？

并且下面這一條資料，無法操作。這也正說明，後端傳回的資料裡面是不包含這一條。

此時如果指定主鍵輸入1281搜尋，發現上面清單頁的問題穩定複現：

問題定位為前端，前端使用React Ant Design。鑒于自己是個半吊子前端開發。請教其他比較資深的前端同僚，讓檢查一下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就應該是後端傳回資料裡面，表示主鍵ID那一個字段。改成如下：​

​rowKey={(record: DatasetItem) => record.datasetId}​

​，問題得到修複。

問題是前人究竟是在什麼樣的狀态下才能寫出這坨屎一樣的代碼的？

問題2

半個月後，另一個清單頁再次出現類似問題：

相同問題，右側的操作按鈕點選沒有反應。代碼也是使用正确的rowKey：

rowKey={(record: any) => record.id}      

rowKey={(record: any, index: number) => `${record.id}${index}`}      

結論

1. 維護他人随手亂寫随手送出的代碼，真痛苦。這種無意之中的髒代碼，讓後來的維護者，不知道要浪費多少時間去排查問題。
2. 不吝請教。