antd key報錯 Each child in a list should have a unique “key“ prop.
阿新 • • 發佈：2020-10-23
使用 react + antd 元件時，有時會報出Each child in a list should have a unique "key" prop.這樣的錯誤
這裡列舉幾個相關的次錯誤報錯和解決方式
- Table 表格
解決方式：官方給 Table 元件提供了一個rowKey屬性，用於給表格的每一行設定一個 key 值
在 antd 官方文件底下也有相關解決辦法：https://ant-design.gitee.io/components/table-cn/#API
- Select 選擇器 中的 Option
解決方式：使用map()方法動態新增選項，也需要給<Option>設定 key 屬性
- 使用
map()遍歷渲染時，也會報出 key 值的錯誤
解決方式：同樣也是給被遍歷的元件加上 key 屬性
- Modal 對話方塊
在渲染 Modal 彈窗時，這裡也報了一個 key 值的報錯
解決方式：給頁尾元件設定 key 屬性
總結：在使用 react 時比較注重unique key編寫是需要注意，如果有次報錯情況，可到根據報錯提供的位置，找到對應檔案中的對應元件或對應標籤處，給其加上key屬性即可。
原文連結：https://blog.csdn.net/AS_TS/article/details/107981367