解决: [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'reduce' of null"

前提

  最近刚接手同事的vue+element项目,就碰到了一个困扰了许久的bug,bug如标题所示,报错“ Cannot read property ‘reduce’ of null" 。 google了许久,发现跟这相关的解决手段很少,所幸最后还是解决了,这里简单记录下。

问题分析

  问题的由来是:同事在测试环境用npm run build:test打包成的dist目录,可以正常运行无异常,而当我通过git pull拉下代码后再本地npm run dev运行起来,其他功能正常运行,唯独在一个页面需要点击任务详情的时候报了上述错误!
在这里插入图片描述
  问题分析:

  • 确认同事本地代码和线上代码一致–>非代码不一致导致的异常
  • 怀疑npm install时的node_modules出现了异常,于是删除对应的node_modules、删除package-lock.json重新install,仍无效–>非包安装异常
  • 怀疑npm的版本不一致导致的,我的是6.4,同事的是6.9,卸载后重新安装6.9的,仍无效–>非npm版本不一致导致的异常
      排查始终围绕着同事的能运行,而我的不能运行,考虑到许多,比如是不是.gitignore上的部分导致不一致,比如同事本地环境的一些特定依赖包等等,最后仍不得其解,所幸在google的时候发现的一个issue很像,相关链接位于:https://github.com/xuliangzhan/vue-element-extends/issues/66。
      这个issue解决:TypeError: Cannot read property ‘key’ of null",和’reduce’ of null"基本是很相像的,而由key of null引起的问题就是vue-element-extends的版本和vue本身的版本不一致导致。但我的vue项目并没有引用到element-extends这个包,不过倒是让我发现了element-ui是2.8版本,而vue是2.5版本。

问题解决

  根据上述的链接大神所说,匹配规则如下:

vue-element-extends 1.0.x 对应 vue^2.5+ 、element-ui^2.0~2.6
vue-element-extends 1.2.x 对应 vue^2.6+ 、element-ui^2.0+

  虽然我没有使用到vue-element-extends,但我把element-ui从2.8改到2.4后问题就成功解决了,所以vue版本和element-ui整个版本匹配基本可以参照如上。

总结

  后续碰到’reduce’/key of null,可以多考虑是否为vue和element版本不一致所导致的~

  • 11
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
引用:这个错误是因为在Vue中渲染时遇到了一个无法读取未定义属性的错误。通常情况下,这种错误发生在嵌套多层数据的情况下,比如使用了data这样的语法来展示数组的第三层数据。在页面初始化的时候,如果数据还没有被异步方法获取到,就会报错。解决这个问题的方法是在没有数据的情况下避免解析,并通过使用v-if指令来控制元素的存在。 引用:根据提供的引用内容,无法确定该错误的具体原因。引用中提到了一个分页组件的代码,但无法确定该组件是否与错误有关。如果有更多的上下文或相关代码,可能能够找到错误的原因。 由于文章的结束部分没有提供明确的引用内容,无法为您提供关于"TypeError: Cannot read properties of undefined"错误的更多信息和解决方法。但是通常这种错误发生在尝试读取一个未定义的属性时。为了解决这个问题,可以在使用之前对数据进行验证,确保它不是undefined。您也可以使用条件语句或可选链操作符来处理这种情况。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [【vue报错】vue.esm.js?c9fd:628 [Vue warn]: Error in render: “TypeError: Cannot read properties](https://blog.csdn.net/Code_King006/article/details/130009634)[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* [2b0e:619 [Vue warn]: Error in nextTick: “TypeError: Cannot read properties of und](https://blog.csdn.net/The_Lucky_one/article/details/127189605)[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* [本科毕业设计-论文-课设-基于SSM+Vue+Mysql的手机商城销售系统项目.zip](https://download.csdn.net/download/qq_35831906/88242668)[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 ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值