antd key報錯 Each child in a list should have a unique “key“ prop.

轉： https://blog.csdn.net/AS_TS/article/details/107981367

 

使用 react + antd 組件時，有時會報出 Each child in a list should have a unique "key" prop. 這樣的錯誤

這里列舉幾個相關的次錯誤報錯和解決方式

1、Table 表格
　　官方給 Table 組件提供了一個 rowKey 屬性，用於給表格的每一行設定一個 key 值
　　如：<Table columns={columns} dataSource={users.data} rowKey={columns => columns.id} />
2、Select 選擇器 中的 Option
　　使用 map() 方法動態添加選項，也需要給 <Option> 設置 key 屬性
3、使用 map() 遍歷渲染時，也會報出 key 值的錯誤
　　給被遍歷的組件加上 key 屬性
4、Modal 對話框
　　給頁腳組件設置 key 屬性