按照antd官網的說明,table屬性rowKey是需要唯一的,如果不唯一,就會出現意想不到的問題。
這不,有個列表頁面的數據就是會存在相同的id,結果就出問題了。相同id的數據會一直保留在下一次查詢結果中,於是頁面就會出現相同的兩條數據。一開始並不確定是相同rowKey導致的,后來看到官網如下圖的

按照 React 的規范,所有的數組組件必須綁定 key。在 Table 中,dataSource 和 columns 里的數據值都需要指定 key 值。對於 dataSource 默認將每列數據的 key 屬性作為唯一的標識。
如果 dataSource[i].key 沒有提供,你應該使用 rowKey 來指定 dataSource 的主鍵,如下所示。若沒有指定,控制台會出現以上的提示,表格組件也會出現各類奇怪的錯誤。
// 比如你的數據主鍵是 uid return <Table rowKey="uid" />; // 或 return <Table rowKey={record => record.uid} />;
便嘗試自定義rowKey來解決問題,得知rowKey可以返回一個函數,那加個隨機數就可以了。
rowKey={record => record.id + Math.random()}
本以為這就可以解決問題了,后來又發現上面代碼導致的另一個問題。如果列表的數據是樹形結構,也就是帶children屬性的,就無法正常顯示children了。
rowKey={record =>record.children && record.children.length ? record.id : record.id + Math.random()}
那最終的解決方案出來了,不過還是不能解決樹形結構的數據如果存在相同id的情況。按理講,是不會出現這種情況的,不然父級id相同,子級就無法找到父級了。
