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

简介: 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,不再报错,顺利解决了这样的问题。

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

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

文章参考:

Maximum call stack size exceeded( 超出最大调用堆栈大小)

Maximum call stack size exceeded

‘Maximum call stack size exceeded’错误的解决方法

目录
相关文章
|
JSON 前端开发 JavaScript
JavaScript拷贝大作战:浅拷贝vs深拷贝
JavaScript拷贝大作战:浅拷贝vs深拷贝
852 0
iframe 在线预览pdf、word、excel、ppt、txt、图片、视频
iframe 在线预览pdf、word、excel、ppt、txt、图片、视频
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
1509 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
JavaScript UED
解决 Element-ui中 选择器(Select)因options 数据量大导致渲染慢、页面卡顿的问题
解决 Element-ui中 选择器(Select)因options 数据量大导致渲染慢、页面卡顿的问题
5079 0
解决 Element-ui中 选择器(Select)因options 数据量大导致渲染慢、页面卡顿的问题
|
JavaScript 搜索推荐 前端开发
vue报错 ‘超出最大堆栈大小‘
vue报错 ‘超出最大堆栈大小‘
955 3
|
JSON JavaScript 前端开发
vue前端运行时出现RangeError: Maximum call stack size exceeded
vue前端运行时出现RangeError: Maximum call stack size exceeded
1605 4
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表,支持用户动态添加设备部位和任务,并提供相应的表单验证规则。
2219 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
|
JavaScript API
vue3父子组件相互调用方法详解
vue3父子组件相互调用方法详解
10190 10
|
NoSQL Redis
蓝易云 - redis报错WRONGTYPE Operation against a key holding the wrong kind of value
解决这个问题的方法是检查你的代码,确保你对每个键使用的命令与该键的类型匹配。你可以使用 `TYPE`命令来确定一个键的类型。例如,`TYPE mykey`将返回 `mykey`的类型。
1138 3
在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件
本文介绍了如何在Vue3项目中使用`vue3-seamless-scroll`插件实现无缝滚动效果,并提供了详细的示例代码和运行效果。
9133 0