element-ui更新到新版本后报错：“TypeError: Cannot read property ‘reduce‘ of null“的原因及解决办法

最新推荐文章于 2024-07-13 15:47:26 发布
最新推荐文章于 2024-07-13 15:47:26 发布
阅读量2.8k 收藏 2
点赞数 6
分类专栏： Vue 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39678607/article/details/116757942
版权
在更新element-ui至2.15.1版本后，遇到'TypeError: Cannot read property 'reduce' of null'的问题。原因是<el-table>的:data绑定默认值为null，解决方案是将默认值改为为空数组[]。此外，data设为字符串也会报错，需确保数据类型正确。文章总结认为这可能是element-ui高版本表格组件的Bug。
摘要由CSDN通过智能技术生成

报错截图如下：

在这里插入图片描述

先直接上问题出现的原因及处理方式

页面内使用了：<el-table :data=“dataList”>表格组件，并且绑定的data数据dataList默认值设置成了null，而data数据本质是数组，新版本element-ui不支持而报错（疑似表格组件出现Bug，可查看下面的分析总结）， 因此需要将data默认绑定值设置为空数组，如：dataList:[ ]，问题就处理了！

问题出现的背景：

最近公司项目中添加新需求，项目中需要使用到element-ui的一些新特性，而项目中原有的element-ui版本相对较老属于2.4.6，于是将element-ui的版本升级到当下最新版本2.15.1，

运行项目在浏览器中打开后，有3个页面打不开，控制台报错："TypeError: Cannot read property ‘reduce’ of null"

问题排查及思考过程：

最低0.47元/天 解锁文章
九涯
关注
  • 6
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
解决TypeError: Cannot read properties of null (reading ‘xxx‘)的错误
念兮为美
03-14 7万+
解决TypeError: Cannot read properties of null (reading ‘xxx‘)的错误.
[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
热门推荐
郭宝的博客
06-24 11万+
错误场景一： 错误提示： 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： // 基于准备好的dom，初始化echarts实例 var bar_dv = document.getElementById('bar_dv'); let myChart = this.$echarts.init(bar_dv) 解...
Uncaught TypeError: Cannot read properties of null (reading ‘disabled‘)
菜同学的博客
11-05 2万+
问题描述 在使用 Vue + ElementUI 开发项目的时候 遇到了下拉框option 失去焦点时 不关闭的问题 查找原因 打开控制台之后发现有个报错信息 参考了其他文章之后说是 使用了 el-dropdown 下缺少 el-dropdown-menu 元素 很奇怪，自己的页面明明没有写 el-dropdown 又继续开始百度，答案出奇的一致 突然发现，关闭模态框后，点击其他地方依旧会出现这个报错 原来同事在导航栏的组件里使用了 el-drop-down 注释之后发现就是这里的问题 解决方案 （.
TypeError: Cannot read properties of null (reading ‘isCE‘)
qubes的专栏
07-13 386
控制台报错 TypeError: Cannot read properties of null (reading ‘isCE’)resolve.dedupe 用于防止项目中的依赖包被重复打包。修改vite.config.js。
vue项目："TypeError: Cannot read property 'reduce' of null"
魅惑青花瓷
10-28 3864
vue运行项目之后，报TypeError: Cannot read property ‘reduce’ of null 1.查看项目package.json,去除^ 2.删除node_modules 3.使用命令npm cache clean -f 4.npm install 5.npm run dev ...
【VUE-01】报错信息“Cannot read property ‘reduce‘ of null”
无敌嗨猫的博客
01-14 4929
在使用vue+elementUI展示数据时，时常会用到table的row-key属性，猫哥早期使用时时常会碰到以下报错信息“Cannot read property 'reduce' of null”，网上很多资料推测是vue和elementUI版本不一致导致。经过博主排查后发现，实际致错原因亦可能是table的Data属性绑定值初始为null所致，所以只需将Data绑定的变量值改为空数组即可。 ...
Cannot read property ‘reduce‘ of null
weixin_43839531的博客
09-03 229
“Cannot read property 'reduce' of null”，网上很多资料推测是vue和elementUI版本不一致导致。 实际致错原因亦可能是table的Data属性绑定值初始为null所致，所以只需将Data绑定的变量值改为空数组即可。
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#Object‘的解决方法
12-09
当你遇到“Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'”这样的错误，通常是因为在同一个模块中混用了CommonJS（`require`和`module.exports`）和ES6模块（`import`...
解决js报错：TypeError: Cannot read property ‘xxx‘ of undefined
FarryNiu的博客
06-11 1万+
找不到未定义的属性/方法
uniapp - 项目运行/打包编译/分包报错 TypeError: Cannot read property call of undefined，uni-app控制台出现一堆这种报错（详细解决方法）
高级前端工程师
05-20 5335
uni-app，TypeError: Cannot read property call of undefined，报错，安卓app，苹果app，微信小程序，移动端，H5网页，手机网站，微信小程序、支付宝小程序，手机app端，nvue，微信小程序分包报错，uniApp小程序平台分包失败怎么办，uniapp运行编译报错解决方案，UniApp移动端网页控制台报错，详细解决办法，清缓存重新编译，热重载，开启压缩代码还是不行怎么办，刷新或者重启一下又好了，过一会又开始报错，vue，分包，小程序分包，支付宝小程序分包
Error in callback for watcher “data“:“type error :cannot read properties of null (reading ‘reduce‘)“
babyrita的博客
04-07 525
发现是elementui的table 组件，绑定的data数据，没有判断请求是否为200，就直接赋值了，这样就导致接口500的时候，拿不到data,给table赋值的是null。接口请求的接口，判断是否200，是的时候再赋值。新加入的项目，莫名报错。
Vue和Element UI项目的异常：TypeError: Cannot read property ‘reduce‘ of null(解决办法)
编程学习者的博客
02-22 2149
1.声明 当前内容主要为复习和使用Vue和Element UI并解决其中出现的问题 问题描述 为table中使用vue绑定数据的问题，启动时出现一大堆错误TypeError: Cannot read property ‘reduce’ of null 当前版本："element-ui": "2.13.0" 和 vue": "2.6.10"（当前版本无问题） 响应后页面成功显示数据 2.当前问题的demo 前台vue的页面 <template> <div class="app-co
element table Error in callback for watcher “data“: “TypeError: Cannot read properties of null (read
qubes的专栏
04-19 3395
从提示看，应该是 element table 遍历列表数据 data 引发的。原因1：list初始化数据是 null 导致。原因2：后台接口返回 null 未处理导致。方案2：后台接口调整，无数据时，返回 []列表页面，前后端联调接口，发现控制台报错。方案1：list初始化改为 []
Error in callback for immediate watcher “data“: “TypeError: Cannot read properties of null
让梦想疯狂
12-14 2万+
今天发现了一个错误提示，虽然不影响数据输出，但终究是一个错误，我们就找找原因把他解决。 vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for immediate watcher "data": "TypeError: Cannot read properties of null (reading 'reduce')" 翻译结果： 立即观察者“数据”的回调错误：“类型错误：无法读取 null 的属性 经过筛查，我们发现去掉ro.
el-table Cannot read property 'reduce' of null
HevenYin的博客
03-16 1975
Cannot read property 'reduce' of null 今天突然发现vue + element-ui中报了这个错误，但是不影响任何逻辑。 原因：el-table data 需要是数字形式，初始化时采用null 解决方案：将data绑定的值初始化为空数组[] ...
Error in callback for immediate watcher “data“ “TypeError Cannot read properties of null
jiey0407的博客
03-03 8510
今天发现了一个错误提示，虽不影响数据输出，但终究是一个错误，我们就找找原因把他解决。 vue.runtime.esm.js2b0e:619 [Vue warn]: Error in callback for immediate watcher “data”: “TypeError: Cannot read properties of null (reading ‘reduce’)” 翻译结果： 立即观察者“数据”的回调错误：“类型错误：无法读取 null 的属性 经过筛查，我们发现去掉row-key="i
报错 Uncaught TypeError: Cannot read properties of null (reading ‘setAttribute‘)
qq_50276105的博客
10-05 3万+
1、项目描述：最近接手一个用到了elementu ui库的vue项目，结果在模块的开发中有个问题伴随始终——Uncaught TypeError: Cannot read properties of null (reading ‘setAttribute‘)的错误。
使用EelementUI时出错Uncaught TypeError: Cannot read property 'disabled' of null
weixin_45280871的博客
04-20 721
报错如下： 这是因为我们在使用element ui时使用了el-dropdown组件，而这个组件中，我们没有使用他的子组件el-dropdown-menu导致的。 解决办法1：在el-dropdown组件中使用他的子组件el-dropdown-menu。 解决办法2:不使用el-dropdown ...
报错：TypeError: Cannot read properties of null (reading 'id')
最新发布
08-31
当遇到 `TypeError: Cannot read properties of null (reading 'id')` 错误时，这意味着你在尝试访问一个 `null` 对象的某个属性（在这个案例中是 `id` 属性），而 `null` 没有这些属性。在 JavaScript 中，`null` ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值