首页 前端知识 [Vue warn]: You may have an infinite update loop in a component render function

[Vue warn]: You may have an infinite update loop in a component render function

2024-03-06 09:03:59 前端知识 前端哥 509 322 我要收藏

老板让该一个bug,结果一连出现好几个问题,然后报错也是很奇葩,在源代码上不能直接定位到,只知道在当前页面上出现的问题,弄了好久,给大家分享一下解决的经验:

You may have an infinite update loop in a component render function -- 你在组件渲染函数中有一个无限更新循环  —— 一定要知道报错是什么意思(不行就有道翻译)

过程:

  • 最初说的问题是一个分页和一个树结构首次渲染的时候不展示,再刷新就又出来了,让解决该问题,那很好,我们代码上有了定位,一个是分页,一个是树结构,那么我就去看这两个地方的代码,看了半天的时候吧(滴bug需要耐心慢慢来,不要急)。由于这两个是组件嘛,所以在这两个地方看了很久,还是没有找到代码的问题所在。

  • 然后我也查了很久这两个组件,看了里面的数据,这些数据都有
  • 查了很多资料,百度了,基本上都说是在循环过程中,修改到了循环对象,从而引发了无限循环,此时vue会发出警告,但并没有真正产生死循环,也是都不是很明确(毕竟不同的代码问题定位也不一样嘛)
  • 这里我给出我的解决方案(虽然有点麻烦,但确实特别实用)

        -- 1.注释掉关于当前页面的所有html代码(确定了进入当前页面肯定不会报错了)

        -- 2.将这些html的代码再一块一块的取消注释,如果取消注释的代码在浏览器没有报错,说明该代码块的html以及用到的methods方法都没有问题

        -- 3.继续取消注释

        -- 4.当某个代码块一取消注释报错了,那么很明显,出问题的就在这个代码块的,那么我们就可以看这块设计到的方法以及渲染页面的方式了

给个思路,无限循环-->v-for/for循环…

        我最后定位到的地方是在这个代码块:

 v-for循环了一个方法,然后该方法获取的目的是为了返回一个数组,之后v-for渲染

  • 找到对应的方法,问题说的所在,也就定位了,看懂对应的方法,解决对应的问题就好

  •  说一下我问题吧

是因为这个方法返回的数组,在渲染数据的时候,没有拿到对应的属性值,然后还一直在v-for该方法,从而造成的死循环报错。下面框的两个点:

  • 总结:当我们报的bug不明显,百度的情况跟我们很像,但是解决不了,可以试一试该方法定位问题所在,实用!!!!

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3334.html
标签
bug
评论
发布的文章

JQuery简介与解析

2024-03-01 12:03:31

在Vue 3项目中使用 echarts

2024-03-29 15:03:05

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!