解决Error: Maximum recursive updates exceeded.
目录
一. 场景
问题本质:需要展示的数据类型与获取的数据类型不一致,需要展示的是字符串或数字,实际返回的是数组,没有处理后直接显示就会报该错。
环境:UI 框架 and-design-vue
报错原话如下:
大概意思是:超过最大递归更新数。 这意味着你有一个反应性效果,它正在改变自己的依赖项,从而递归地触发自己。 可能的来源包括组件模板、渲染函数、更新的钩子或观察者源函数。
情况:拿服务器返回的数据在 table 标签里面进行呈现,该数据比较大。如下图,还没有截完…
刚开始我还以为是数据过大导致的,因为确实很大!但是我进行了一个操作,截取了返回的数据,选择数据小的进行展示,如下图:
还是报错了,那就说明不是这个原因。
我又仔细看了下服务器返回的数据,发现该字段返回的数据是数组!,而 table 里面显示的需要是字符串数据,数据类型不一样,导致 and-design-vue 在一直递归渲染该数据,所以报错了。
二. 解决办法
了解了问题所在就好找解决办法了
2.1 方法一
利用 and-design-vue 里table
标签的插槽slots
属性,不处理直接在页面进行显示。某些数据过长过大,通过 ellipsis 属性配合文字提示标签tooltip
进行显示。
// js 部分 const columns = [ { title: '替换词', dataIndex: 'words', width: '40%', slots: { customRender: 'words' }, // ellipsis: true, // 超过宽度后以省略号显示 }, ] // html 部分 <a-table bordered :columns="dynamicColumns" :data-source="dynamicList" :scroll="{ x: 0, y: 400 }" :pagination="false" :rowKey="(record) => record.creativeWordId" :loading="false" > <template #words="{ record }"> <a-tooltip placement="left"> <span>{{ record.words }}</span> <template #title>{{ record.words }}</template> </a-tooltip> </template> </a-table>
完美的解决问题,没有报错了,如下图,将数组数据直接展示了出来:
2.2 方法二
从源头上解决问题,将获取的数据从数组转为字符串。
以下两种方式均可以,toString()
用于数组时,其实内部也调用了join()
方法。
// 方式一 dataList.data.creativeWord.forEach((item) => { item.words = item.words.join(','); }); // 方式二 dataList.data.creativeWord.forEach((item) => { item.words = item.words.toString(); });
效果如下,也没有报错了:
第一种方法虽然解决了问题,但是视觉效果不是很好,建议使用第二种。
原文:链接
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 解决Error: Maximum recursive updates exceeded.
码云笔记 » 解决Error: Maximum recursive updates exceeded.