解决Error: Maximum recursive updates exceeded.

一. 场景

问题本质:需要展示的数据类型与获取的数据类型不一致,需要展示的是字符串或数字,实际返回的是数组,没有处理后直接显示就会报该错。

环境:UI框架and-design-vue

报错原话如下:

报错原话

大概意思是:超过最大递归更新数。 这意味着你有一个反应性效果,它正在改变自己的依赖项,从而递归地触发自己。 可能的来源包括组件模板、渲染函数、更新的钩子或观察者源函数。

情况:拿服务器返回的数据在table标签里面进行呈现,该数据比较大。如下图,还没有截完…

拿服务器返回的数据在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();
});

效果如下,也没有报错了:

将获取的数据从数组转为字符串

第一种方法虽然解决了问题,但是视觉效果不是很好,建议使用第二种。

原文:链接

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 解决Error: Maximum recursive updates exceeded.

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们