vue渲染数据出现TypeError: Cannot read properties of undefined (reading ‘key‘)

项目场景:

vue + view-design 4.5.0

问题描述

二次查询数据渲染出现TypeError: Cannot read properties of undefined (reading 'key')


原因分析:

出现渲染错误的原因有多种,这里只分享我遇到的情况,如果正好对号入座,那么可以节省大量排查时间,如果不是这个原因也可以带来思路,因为这个错误基本上是因为不符合渲染规则造成的。

我这里是因为使用了iview的table,其中某一列需要树形控制展开,使用了tree的功能(组件功能链接:https://www.iviewui.com/view-ui-plus/component/form/table#tree),问题就出在rowKey上,我这里的rowKey字段是sn,然后children的数据因为和父级行数据是同一个数据的不同形式,所以也有相同的sn字段,这就造成了重复的rowKey,导致二次渲染数据时发生异常。


解决方案:

children的数据如果和父级数据有相同的rowKey字段,需要避开,如果children需要使用该字段可以使用其他字段来替代,如果不使用的话children数据就不要返回该字段

相关推荐
用户69190268133940 分钟前
Agent 记忆处理机制详解:从变量数据类型到内存模型
javascript·架构
ShineWinsu1 小时前
对于 Vue 3:开发前需要掌握的 JavaScript 核心基础:从变量、数组方法到 Promise、Async/Await 与 ES Module 的解析
javascript·vue.js·elasticsearch
晴天161 小时前
Tsup:TypeScript库打包的“零配置极速方案”
前端·javascript·typescript
雪芽蓝域zzs1 小时前
第十七节:面包屑导航组件(适配多级嵌套路由)
前端·javascript·vue.js
smileNicky2 小时前
React 弹窗组件如何在新标签页打开?
javascript·react.js·ecmascript
yume_sibai2 小时前
Element Plus 其他实用组件完全指南(10个核心组件)
前端·javascript·vue.js
雪芽蓝域zzs2 小时前
第二十二节:进阶:用户管理新增、编辑弹窗 + 表单校验
前端·javascript·vue.js
shmily麻瓜小菜鸡2 小时前
JavaScript / TypeScript 易踩坑知识点 —— 作用域与变量类
开发语言·javascript·typescript
变与不变8063 小时前
JS作用域,作用域链
前端·javascript·es6
计算机学姐3 小时前
基于SpringBoot的高校爱心慈善管理系统
java·vue.js·spring boot·后端·spring·tomcat·mybatis