antd裡面的Table渲染多出來資料問題

最近發現個問題，就是table渲染的時候竟然會多出來一條上次的資料，關鍵在render渲染前還列印了資料是對的，但是一看頁面傻眼了

，然後發現了這是antd的乙個bug,記錄下，希望幫我一樣遇到這樣問題的人。

按照 react 的規範，所有的元件陣列必須繫結 key。在 table 中，datasource 和 columns 裡的資料值都需要指定 key 值。對於 datasource 預設將每列資料的 key 屬性作為唯一的標識。最後發現是由於設定的rowkey不是唯一的問題造成了此bug.

react中的key屬性，它是乙個特殊的屬性，有了key屬性後，就可以與元件建立了一種對應關係，簡單說,react利用key來識別元件，他是一種身份標識，就像每個人有乙個身份證來做辨識一樣。每個key 對應乙個元件，相同的key react認為是同乙個元件，這樣後續相同的key對應元件都不會被建立

如果兩個元素是相同的key，且滿足第一點元素型別相同，若元素屬性有所變化，則react只更新元件對應的屬性，這種情況下，效能開銷會相對較小

在render函式執行的時候，新舊兩個虛擬dom會進行對比，如果兩個元素有不同的key，那麼在前後兩次渲染中就會被認為是不同的元素，這時候舊的那個元素會被unmount，新的元素會被mount

1.設定rowkey屬性，指定值為唯一的字段（確保是唯一不會重複）

2.設定columns屬性的配置中的key（好像主要是第一列），指定值為唯一的字段

好了問題解決了，我們來梳理下rowkey吧，在開發中使用antd的table元件時，經常還有warning提示，如下!

就是託我們的rowkey使用不當導致，設定了rowkey屬性，但所指定欄位的值不是唯一的或者直接沒設定，希望其他朋友也能重視這個問題，以保證**開發的效能優化和避免像我這樣不起眼但是也很意外的bug,祝個人永無bug