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

相关推荐
ZC跨境爬虫6 小时前
跟着 MDN 学JavaScript day_7:数学运算与逻辑判断实战测试
开发语言·前端·javascript·学习·ecmascript
凌云拓界6 小时前
文件管理:让AI安全操作你的电脑 ——CogitoAgent开发实战(三)
javascript·人工智能·架构·开源·node.js
凌云拓界7 小时前
联网能力:让AI看见更广阔的世界 ——CogitoAgent开发实战(四)
javascript·人工智能·架构·node.js·创业创新
HYCS8 小时前
用pixi.js实现fabric.js(六):从线性代数的角度理解编辑器交互
前端·javascript·canvas
you45808 小时前
学成在线--day02 CMS前端开发(含Vue基础知识得回顾)
前端·javascript·vue.js
想吃火锅10058 小时前
【leetcode】1.两数之和js版
javascript·算法·leetcode
xiaofeichaichai8 小时前
虚拟 DOM
前端·javascript·vue.js
初一初十9 小时前
vue3实现的纯前端护肤品商城网站
前端·javascript·vue.js·前端框架
ANnianStriver10 小时前
PetLumina 07 — 宠物管理升级与 JavaScript 大数精度修复
开发语言·javascript·ai编程·宠物
初一初十10 小时前
vue3茶叶商城网站vue网页vuejs前端
前端·javascript·vue.js·vscode·前端框架