阅读 134

Maximum call stack size exceeded报错的原因及解决办法

背景

在使用ElementUI的Select选择器,其中有一个可搜索的选择器,意思就是用户输入文字,选择器option选项可以模糊搜索(根据用户输入的文字推荐选项) 在这里插入图片描述 然后我给选择器的el-option根据数组 Options 进行遍历,该数组长度大概15万条,总之就是为了推荐选项更为精确,数组长度十分巨大

<el-select :value="whichSelect" filterable placeholder="请选择选项" @change="handleSelect">   <el-option     v-for="item in Options"     :key="item.bankName"     :label="item.bankName"     :value="item.bankName"   >   </el-option> </el-select> 复制代码

然后本以为选项推荐功能可以美滋滋的使用了,结果浏览器甩出来了这么一个报错,意思是超出最大调用堆栈大小 在这里插入图片描述

解决办法

Maximum call stack size exceeded报错原因

Maximum call stack size exceeded,这是啥意思哇???网上说造成这个报错的场景,有的是由于router里面路径为声明,有的是未定义变量,有的由于是递归函数等等,实际上造成这样的报错,根本原因几乎都是递归太深,导致栈溢出

如何解决

然而,我的代码并没有递归函数啊,为何会造成这样的报错呢?这是因为ElementUI的select组件内部使用了递归,而我Options数组长度太大,造成了栈溢出。于是将Options数组长度减少到1000,不再报错,顺利解决了这样的问题。

在以后的编码,应该多注意,尽量少深层次递归,以及数组长度尽量控制长度不要太大。

如有遇到类似或其他的问题,欢迎探讨。


作者:Boale_H
链接:https://juejin.cn/post/7023673519628091400


文章分类
后端
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐