Cannot read property ‘key‘ of undefined 页面假死问题总结

已于 2022-03-11 16:25:51 修改
阅读量4.5k 收藏 4
点赞数 1
分类专栏： 项目问题 文章标签： 前端
于 2022-03-11 16:24:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42880088/article/details/123427986
版权

首先，页面假死是由于for循环中key值重复导致的，下边是问题解决的详细描述

昨天在使用vue进行页面循环的时候，起初控制台总会报一些错误，说key存在重复，但是我们设置的key值是返回回来每个数组对象中的key，这个key在数据库中是唯一值，但是依然发生错误

起初只是控制台报错了，但是当我们循环的列表超过百条的时候，出现了一个严重问题，点击列表进行删除操作的时候页面直接卡住了，但屏幕依然可以滚动，此时控制台报的错误如下：在这里插入图片描述
为了解决这个问题，我们最终将key的值设置为了每个对象数组中的label值，这个label值是唯一的字符串，后边再追加 '–only’

小鸡爱吃米
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
TypeError: Cannot read property 'key' of undefined
杰克拉乌的博客
10-30 9528
vue中经常会遇到这样的报错。今天找了半天总结一下。 这是git上的错误形式，看了半天没发现如何解决。 这种就需要找循环的：key的设置，有重复就会报错，页面就死掉了。 排查页面中每一个for循环的key设置。 ...
Sawyer-zh#study-note#Vue-js路由报错TypeError-Cannot-read-property-c-
07-25
title: 'Vue.js路由报错:TypeError: Cannot read property ''_c'' of undefined'错误详情：像上面这
关于vue中Cannot read property ‘key‘ of undefined 的解决
u013017173的博客
01-13 9833
报错图： 原因及解决办法： 就是因为":starNum=" 的值应该是number型，为空时我传递一个String型的 ‘0’，应该为number型的 0 导致循环中starNum 被使用，类似 v-for="(item,index) in starNum" :key= “index” key就报错了. key的报错，一般就是用到key了，或者就是v-for里的 ：key 的问题 原代码： <SubHeader headerText="技术" :starNum=
Cannot read property ‘key‘ of undefined“
jdk1994的博客
09-30 3656
报这个错的原因有很多，这里记录下我近日发生这个报错的原因； 我的是由于后台返回给我字段中含有Id字段，且该字段并非主键，含有大量的重复值，这个和VUE唯一标识ID 冲突了，所以导致我前台一搜索整个页面就卡死了，目前我采取的解决方式是，让后台返回字段时转一下，改成S_ID即可了。 ...
解决 Cannot read property ‘key‘ of undefined
工作中遇到问题记录
09-15 1219
解决 Cannot read property 'key' of undefined
[Vue warn]: Error in nextTick: “TypeError: Cannot read property ‘key‘ of undefined“ 页面出现假死
qq_45971405的博客
08-26 1万+
报错之后页面出现假死状态 原因： 树形表格的row-key重复导致页面卡死 本以为这只是个警告，没想到他才是罪魁祸首。 将row-key设置成唯一标识即可解决问题 如果没有用到树形表格的话也有可能是在v-for中的key重复了 ...
cannot read property 'key' of undefined!!!
努力学习的肥宅
06-01 901
我在网上搜了一下报这个错的主要问题，发现主要可能是key值不唯一，我看了一下后台返回的数据才发现最后一个数据是测试的，跟倒数第二个的value值(也就是我拿来当key的数据是相同所以才导致出现这个问题)，我是直接叫后台删了那个测试数据 ...
Vue.js报错—TypeError:Cannot read property key of undefined
ZKY的博客
06-04 6351
报这个错误的原因，一般就两种情况 html页面渲染的时候。双{{value.key}}插值或者v-text="value.key"中找不到这个key，报undefined 还有就是v-for循环的时候 绑定的:key="tag,name" 这个name未定义， 希望可以解决你的问题。。如果帮助到你了，记得点赞关注啊 ...
Cannot read property 'key' of undefined"
saxliu的专栏
12-19 4713
vscode使用代码格式化造成 el-pagination layout的参数加了空格，vue报error type ：Cannot read property 'key' of undefined"，页面失去响应
浏览器突然报错 ‘key‘ of undefined
冯少奇@的博客
04-23 592
问题:浏览器突然报错 ‘key’ of undefined TypeError: Cannot read property 'key' of undefined 原因:使用的el-pagination在格式化代码的时候layout属性的参数会多加空格. 解决:去掉多余的空格就好.
Vue打包Cannot read property 'tapPromise' of undefined报错处理.docx
01-21
Vue打包Cannot read property 'tapPromise' of undefined报错处理 Vue.js是一款流行的前端框架，用于构建用户界面和单页应用程序。然而，在使用Vue.js时，我们可能会遇到一些报错信息，例如Cannot read property '...
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
01-19
jQuery Cannot read property ‘msie’ of undefined错误的解决方法 最近把一个项目的jQuery升级到最新版，发现有些页面报如下错误 Cannot read property ‘msie’ of undefined 上jQuery网站上搜了一下，原因是$....
el-table出现cannot read property ‘key‘ of undefined
weixin_43160044的博客
01-23 1687
起因： 线上项目突然反馈说有列表卡死的情况，紧急排查了一下，发现是返回了重复的列表id了，而且我们使用了rowKey属性，所以卡死了。这是后端迁移的数据，是正常的，所以得我们解决… 解决方案： 获取数据时我们手动给列表设置一个不重复的id // 假如table数据是data，页数是page，数量是limit data.forEach(item => { item._id = `${item.id + (page * limit)}` }) 这样子就能保证每个id不重复并且翻页时id都能对得上了~
从后台获取数据到vue前端树形展示报错vue.jsTypeError: Cannot read property ‘key‘ of undefined
qq_44182234的博客
07-22 1439
从后台获取数据到vue前端 树形表格展示 报错vue.jsTypeError: Cannot read property 'key' of undefined、页面卡死的解决办法 从后端得到的集合数据要想在树形表格中展示，则这个集合的实体都会有个集合属性，用来存放子级数据。数据传到前端后需要将层级数据转换成单层级别的数据用来在表格中显示。 //将层级数据转换为单层级别的迭代方法 generateList(tableTreeList){ //tableTreeList为层级数据 let _tha
TypeError: Cannot read property ‘key‘ of undefined
jq1223的博客
03-15 817
报错信息： 查看分页时的属性单词对不对
elementUI的el-tree树形组件模糊匹配查询报错TypeError: Cannot read property ‘key‘ of undefined 问题原因
qq_40529904的博客
11-09 2110
最近用elementui的树形组件e-tree,懒加载与模糊匹配一起用的时候报了这个错误 前端代码是这么写的 filterTextBss(val) { var _this=this; _this.form10.odsCity=_this.cityId; _this.form10.channelId=''; _this.form10.name=val;
Vue中报错：“TypeError: Cannot read properties of undefined (reading ‘key‘)“
热门推荐
try_hard_more的博客
06-12 1万+
原因：在循环的时候 取key值 没有取到 是undefined
Web前端-Web开发CSS基础6-弹性盒子
最新发布
a15735748145a的博客
07-16 1105
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Cannot read property VibratorPlayVibration of undefined
09-06
根据提供的引用内容来看，"Cannot read property VibratorPlayVibration of undefined" 是一个错误消息。然而，根据提供的引用内容中没有相关的信息能够解释这个错误的具体原因或如何处理。为了解决这个问题，我建议你尝试以下几个步骤: 1. 检查代码: 确保你的代码中没有拼写错误或语法错误。尤其是检查你是否正确地引入了相关的库或模块。 2. 查看文档或错误信息: 如果你使用了特定的库或框架，查看它们的官方文档或错误消息以获取更多关于这个错误的信息。这些资源通常提供了关于如何解决常见错误的指导。 3. 搜索互联网: 使用搜索引擎搜索你遇到的错误消息，看看是否有其他人在类似的情况下遇到了相同的问题，并找到了解决方案。 4. 寻求帮助: 如果你无法解决这个问题，你可以向相关的开发社区或论坛寻求帮助。在这些地方，你可以提供更多的细节和代码示例，以便其他开发者可以更好地帮助你。 请记住，由于缺乏具体的信息，我无法给出精确的解决方案。你可能需要进一步调查和调试才能解决这个问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Cannot read property map of undefined](https://blog.csdn.net/estherlxy/article/details/106493056)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Vue打包Cannot read property 'tapPromise' of undefined报错处理.docx](https://download.csdn.net/download/rongbo91/77070400)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法](https://download.csdn.net/download/weixin_38693586/14805574)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值