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数据就不要返回该字段

相关推荐
牧濑红莉4 小时前
网络安全竞赛pwn全解及第一道ai的wp
javascript·.net
kyriewen4 小时前
别再用AI debug了——这5种bug越修越烂
前端·javascript·ai编程
顾昂_6 小时前
内存泄漏排查和 Chrome DevTools 使用教程
前端·javascript·面试
An_s7 小时前
rust开发wasm与浏览器(js)交互
javascript·rust·wasm
山河木马7 小时前
GPU自动处理专题4-填充覆盖区域(光栅化)
javascript·webgl·计算机图形学
悦儿遥遥雨17 小时前
PXE + Kickstart 无人值守批量部署系统
linux·javascript·nginx
清秋8 小时前
全网最全 ECMAScript 攻略( 更新至 ES2026)
前端·javascript·编程语言
Hilaku8 小时前
为什么 AI 写前端时,总是优先选择 React,而不是 Vue?
前端·javascript·程序员
不简说11 小时前
拖拽DIY表格插件来了!sv-print 七月更新:这次真的能自己拼表格了
前端·javascript·前端框架
weixin_4713830311 小时前
Next.js - 04 - 深入理解next.js渲染原理
前端·javascript·next.js