当前位置: 代码迷 >> 综合 >> You may have an infinite update loop in a component render function.
  详细解决方案

You may have an infinite update loop in a component render function.

热度:79   发布时间:2023-12-16 04:18:29.0

问题:You may have an infinite update loop in a component render function.
在这里插入图片描述
在组件渲染函数中你可能有一个无限更新的循环

这就导致页面一直在加载无限循环下去,没有终止,卡死

在vue的data方法中:

data() {
    // 定义响应式变量isDelFlag: false
}
 <el-table-column prop="" label="操作" width="190" align="center"><template slot-scope="scope" class="wes-operation-column"><el-button type="text" @click="openModal('deleteDialogVisible', scope.row.list)":disabled="handleDeleteFlag(scope.row.list)">删除标识</el-button></template></el-table-column>
// 处理标识的函数handleDeleteFlag(list) {
    // 每一项都不为1说明没有皮试药物// let isPsbzlet showDelete = list.every(item => item.psbz !== '1')if (!showDelete) {
    // 有删除标识for (let item of list) {
    if (item.psbz === '1' && item.zxzt === '已完成') {
    this.isDelFlag = truebreak} else if (item.psbz === '1' && item.zxzt === '进行中') {
    this.isDelFlag = truebreak} else {
    this.isDelFlag = falsebreak}}} else {
    this.isDelFlag = true}return this.isDelFlag}

问题产生的原因:你在data中定义了一个响应式变量,而这个响应式变量的状态是通过一个函数来返回的,返回的状态结果要显示在Dom中,而这个函数的内部是一个循环,

问题就来了:循环没有及时终止,导致变量一直在更新,而Dom又一直在渲染,无限循环,渲染-更新 卡死

解决方案:将data中的响应式变量去掉,而是在函数内部定义一个局部变量,最终将这个局部变量返回即可

data() {
    // 定义响应式变量// isDelFlag: false
}

Dom处理不变

// 处理标识的函数handleDeleteFlag(list) {
    // 每一项都不为1说明没有皮试药物let isDelFlaglet showDelete = list.every(item => item.scbz !== '1')if (!showDelete) {
    // 有删除标识for (let item of list) {
    if (item.scbz === '1' && item.wczt === '已完成') {
    isDelFlag = truebreak} else if (item.scbz === '1' && item.wczt === '进行中') {
    isDelFlag = truebreak} else {
    isDelFlag = falsebreak}}} else {
    isDelFlag = true}return isDelFlag}
  相关解决方案