react 解决警告Warning: Each child in a list should have a unique “key” prop - 简书


本站和网页 https://www.jianshu.com/p/7b1125ac57f3 的作者无关,不对其内容负责。快照谨为网络故障时之索引,不代表被搜索网站的即时页面。

react 解决警告Warning: Each child in a list should have a unique “key” prop - 简书登录注册写文章首页下载APP会员IT技术react 解决警告Warning: Each child in a list should have a unique “key” prop黎明的叶子关注赞赏支持react 解决警告Warning: Each child in a list should have a unique “key” prop总结:
react在循环元素的时候一定要加key值,有两个重要点。
1.key值不可以重复。key值重复会发生意想不到的错误。所以一定要保证key的唯一性。我曾遇到过key值重复后,重复的key值会在组件被多次调用的时候保留下来。造成数据错乱。
2.加key的地方是在循环的第一层元素上。比如以下,应该加在 li 标签上
list.map(item=>{
return (<li key={}></li>)
})
那如果我要在 li 上,加一个tooltip呢,如下, 则这个时候应该加在Tooltip上。如果是修改的时候,别忘了要改变key的位置。不然会报警告。
list.map(item=>{
return (<Tooltip title={} key={}><li></li></Tooltip>)
})
// 警告内容
// Warning:Each child in a list should have a unique "key" prop.
推荐阅读更多精彩内容React前端开发 - 解决报错:Warning: Each child in a list ...使用React框架开发前端页面,控制台报错如下: 错误原因: 控制台错误提示:list中的每个子组件应该有一个唯一...程序猿蛋蛋哥阅读 14,323评论 0赞 2AntDesign Table 组件的数据源不用必须有"key"属性(Warning: Eac...Table 组件报错:Warning: Each child in a list should have a un...IT姑凉阅读 898评论 0赞 0react.js:3640 Warning: Each child in an array o...react.js:3640 Warning: Each child in an array or iterator...禅与计算机程序设计艺术阅读 623评论 0赞 1ReactNative解决Warning: Each child in an array or...今天试了一下RN项目, 报了个奇葩错误, 先上代码 上面的组件执行会报错: Warning: Each child...OnlyFunny阅读 1,938评论 0赞 1react-native Each child in an array or iterator...错误提示:Each child in an array or iterator should have a uni...小西瓜简书阅读 796评论 2赞 3评论0赞11赞2赞赞赏更多好文