如何修复或抑制误报“您可能在组件渲染函数中有无限更新循环”Vue 警告

Posted 2023-02-22

【中文标题】如何修复或抑制误报“您可能在组件渲染函数中有无限更新循环”Vue 警告

【英文标题】：How to fix or suppress a false positive "You may have an infinite update loop in a component render function" Vue warning

【发布时间】：2018-12-31 09:20:42

【问题描述】：

我有以下 Vue 模板：

<div v-for="cartItem in cartItems">
    <p class="is-size-5 has-text-weight-bold" v-if="showCategoryName(cartItem.searchCat2)">
        cartItem.searchCat2
    </p>
</div>

调用下面的Vue方法

showCategoryName(catName) 
  if (this.currentCatName === catName) 
    return false;
  
  this.currentCatName = catName;
  return true;
,

这会导致控制台中出现以下 Vue 警告：

您可能在组件渲染函数中有无限更新循环。

从代码中可以看出，虽然循环中有赋值，但是这个赋值并没有什么会导致无限更新的。

我也尝试将cartItem.searchCat2 替换为currentCatName，但仍然收到错误消息。

我怎样才能抑制这个错误，或者让 Vue 对没有无限更新循环的可能性感到满意？

更新：

此代码为我完成的是，因为购物车项目按类别名称分组，所以只有具有该类别名称的第一个项目显示类别名称。因此，不是椅子类别的每个产品都在其上方显示“椅子”，而是只有第一个产品。这符合我的预期。

【问题讨论】：

在模板中改变状态有点奇怪。 showCategoryName 通过设置currentCatName 做了什么？ （模板渲染应该是幂等的……）

分配的目的是什么？首次检查时，您返回true，但随后将其更改为false？最后你什么都不显示？

尝试将v-if 的逻辑提升到map()ed 版本的cartItems 中。这样你就可以在v-for 中做尽可能少的逻辑。

@Ry- 基本上，购物车项目按类别名称分组，只有具有该类别名称的第一个项目应显示类别名称。不是每个椅子产品上面都有“椅子”，而是只有第一个。

创建一个将源数组拆分为按类别分组的子数组的计算属性不是更容易吗：jsfiddle.net/eywraw8t/24880

【参考方案1】：

可以直接在模板中通过索引引用上一项：

<div v-for="(cartItem, index) in cartItems">
    <p class="is-size-5 has-text-weight-bold"
       v-if="index === 0
             || cartItem.searchCat2 !== cartItems[index - 1].searchCat2">
        cartItem.searchCat2
    </p>
</div>