antd key報錯 Each child in a list should have a unique “key“ prop. - 碼上快樂

相關內容簡體繁體

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

本文轉載自查看原文 2020-10-23 14:58 6203 React

使用 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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 antd key報錯 Each child in a list should have a unique “key“ prop. react異常 Each child in a list should have a unique “key” prop Each child in an array or iterator should have a unique "key" prop. Check the render method of `CreditCategoryModal` antd desgin vue 報錯 Warning: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key. React 錯誤Each child in an array or iterator should have a unique “key” prop Ant table報錯 Warning: [antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.] React表格報錯Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key. Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key. Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key. 解決antD中關於table組件中報這樣的警告warning.js?2149:7 Warning: [antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.]問題

粵ICP備18138465號 © 2018-2025 CODEPRJ.COM