vue You may have an infinite update loop in a component render function报错

最新推荐文章于 2024-11-27 23:35:57 发布

原创最新推荐文章于 2024-11-27 23:35:57 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

v-for 专栏收录该内容

2 篇文章

订阅专栏

在使用Ant Design Vue的表格组件时，遇到'You may have an infinite update loop in a component render function'错误。错误源于在计算属性中修改了data数据，导致渲染与数据更新的无限循环。解决方案是修改计算方法，避免直接更新原有数据值。

如标题所示，是在使用ant design vue的表格组件时引起的错误，报错信息如下
在这里插入图片描述
首先，这个表格是在一个v-for的a-tab组件内的a-table
看错误信息表示无限更新的循环
后来发现，渲染表格内容时，调用了一个计算方法返回要显示的内容，错误在于，在计算方法内，又改变了data数据的值，在更新渲染的时候又修改数据，又回导致更新，于是就死循环了
简略错误代码如下

<a-tabs v-model="queryMode">
        <a-tab-pane v-for="item in tabList" :key="item.value" :tab="item.title">
          	 <a-table
		      :columns="header"
		      :scroll="{ x: scrollX, y: TABLE_MAX_HEIGHT }"
		      :dataSource="body"
		      :loading="loadingObj"
		      :pagination="pagination"
		    >
		      <template v-for="title in headerSlots" :slot="'$' + title">
		        <span :key="title">
		          {{ getHeaderTarget(title).title }} // 此处调用计算方法
		        </span>
		      </template>
		    </a-table>
        </a-tab-pane>
      </a-tabs>

	computed: {
	    getHeaderTarget () {
	      return dataIndex => {
	        const target = this.systemNameValid[dataIndex]
	        target['title'] = this.header.find(item => item.dataIndex === dataIndex).text // 此处又修改了target的值
	        return target
	      }
	    }
	  },

修改计算方法，不更新原值就可以了

computed: {
	    getHeaderTarget () {
	      return dataIndex => {
	        const target = this.systemNameValid[dataIndex]
	        return {remark: target.remark, title: this.header.find(item => item.dataIndex === dataIndex).text}
	      }
	    }
	  },