Question

得到错误“组件渲染函数中可能有无限的更新循环。”还不确定要怎么做？

我尝试使数组成为数据值。另外，我尝试使用for循环。似乎在第一种方法中是孤立的。

data() {
  return { 
      activeTab: 0,
      uniqueLobs: []
    }
},
methods: {
    addDollarSymbol(val){
        var newVal = "$" + val;
        return newVal.replace(/<(?:.|\n)*?>/gm, ''); //trims white space
    },
    removeDuplicateLOB(lineOfBusiness) {
        //removes duplicate LOBs for tabs
        let incomingLobs = [];
        lineOfBusiness.forEach((business) => {
        incomingLobs.push(business.line_of_business.name);
        });
        this.uniqueLobs = [...new Set(incomingLobs)];
        return this.uniqueLobs;
    },
    showSpecificLobData(activeTab){
        //compares tab LOB to all incoming card data and shows only the LOB data for that specific tab
        let activeTabData = [];
        this.product_rate_card.forEach((product) => {
            if (product.line_of_business.name == this.uniqueLobs[activeTab] ) {
                activeTabData.push(product);
            }
        });
        return activeTabData;
    }
}

Answer 1

在这种情况下，“循环”是指无限递归，而不是for循环。

该警告记录在这里：

https://github.com/vuejs/vue/blob/ff911c9ffef16c591b25df05cb2322ee737d13e0/src/core/observer/scheduler.js#L104

其中大部分操作可能不会立即显而易见，但是代码的关键部分是if (circular[id] > MAX_UPDATE_COUNT) {行，该行用于检查特定观察者是否已被触发100次以上。

当反应性数据更改时，它将导致重新呈现依赖于该数据的任何组件。如果渲染过程更改了相同的数据，则将再次触发渲染。如果数据永远不会稳定下来，那么它将永远持续下去。

这是触发该警告的组件的简单示例：

<template>
    <div>
        {{ getNextCount() }}
    </div>
</template>

<script>
export default {
    data () {
        return {
            count: 1
        }
    },

    methods: {
        getNextCount () {
            this.count++

            return this.count
        }
    }
}
</script>

模板依赖于count，但是通过调用getNextCount，它也会更改count的值。当该值更改时，该组件将重新添加到渲染队列中，因为相关性已更改。它永远不会中断，因为值会不断变化。

由于您没有发布足够的代码，我无法确定是什么导致了此组件中的问题。但是，它可能类似于this.uniqueLobs = ...行，假设在渲染过程中调用了该行。通常，我建议避免在渲染阶段更改this上的任何内容。渲染应该是只读的。通常，您要对要保留的所有派生数据使用计算属性。

您可能在组件渲染函数错误中遇到无限更新循环-解决方案？

1 个答案: