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’错误的解决方法

目录
相关文章
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
1406 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10754 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
JavaScript 搜索推荐 前端开发
vue报错 ‘超出最大堆栈大小‘
vue报错 ‘超出最大堆栈大小‘
837 3
|
开发框架 移动开发 JavaScript
SpringCloud微服务实战——搭建企业级开发框架(四十七):【移动开发】整合uni-app搭建移动端快速开发框架-添加Axios并实现登录功能
在uni-app中,使用axios实现网络请求和登录功能涉及以下几个关键步骤: 1. **安装axios和axios-auth-refresh**: 在项目的`package.json`中添加axios和axios-auth-refresh依赖,可以通过HBuilderX的终端窗口运行`yarn add axios axios-auth-refresh`命令来安装。 2. **配置自定义常量**: 创建`project.config.js`文件,配置全局常量,如API基础URL、TenantId、APP_CLIENT_ID和APP_CLIENT_SECRET等。
1162 60
|
JSON JavaScript 前端开发
vue前端运行时出现RangeError: Maximum call stack size exceeded
vue前端运行时出现RangeError: Maximum call stack size exceeded
1530 4
|
JavaScript UED
解决 Element-ui中 选择器(Select)因options 数据量大导致渲染慢、页面卡顿的问题
解决 Element-ui中 选择器(Select)因options 数据量大导致渲染慢、页面卡顿的问题
4970 0
解决 Element-ui中 选择器(Select)因options 数据量大导致渲染慢、页面卡顿的问题
|
JavaScript API 索引
js中的reduce()方法 讲解 和实现
`reduce()` 方法对数组元素依次应用一个回调函数,将结果累计并最终返回单一值。语法为 `reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`。参数包括累计器(初次为初始值或首元素)、当前元素值、索引及数组自身。此方法需返回值供下一轮迭代使用。常见应用场景包括计算数组总和与平均值、统计元素频率、过滤与转换数组内容及去除重复项等。例如,可通过 `reduce()` 快速计算 `[1, 2, 3, 4, 5]` 的总和或对对象属性值求和。此外,还可自定义实现 `reduce()` 方法
7572 1
|
JavaScript
Vue3基础(22)___vue3中使用$forceUpdate
本文介绍了在Vue 3中如何使用`$forceUpdate`来强制更新组件,通过`getCurrentInstance`方法获取到组件实例后调用。
1605 0
|
资源调度
uniapp引入vant组件库
uniapp引入vant组件库
4115 11