报错：Encountered two children with the same key, `.$xx`. Keys should be unique so that

最新推荐文章于 2024-07-03 19:16:26 发布

原创最新推荐文章于 2024-07-03 19:16:26 发布 · 3.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

在封装antd的Select组件时遇到报错，提示key需唯一。尝试多种生成key的方法无效，问题出在value未绑定唯一id。解决方案是为value拼接index或随机数确保唯一性，传递参数时可去除拼接部分。

报错：Encountered two children with the same key, `.$xxx`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

封装antd select 组件时，key换了无数次，各种拼接、转换随机数，都不管用，最终发现value绑定的不是唯一id。

解决：value后面拼接index，再不济拼接随机数就好了，传参时截掉。