javascript - "You may have an infinite update loop in a component render function"当我添加这行代码时 - console.log(perksTree.slots.unshift())

Question

我有一个函数，可以从 JSON 中查找具有 id === this.match.mainParticipant.stats.perkSubStyle 的对象。该对象包含一个名为 slots 的属性，它是一个数组，有 4 个元素。每个插槽有 3 个元素，代表游戏中的 rune 。如果您迭代插槽及其元素，您会得到以下结果:

我使用此函数获取对象:

secondaryPerks(){
    let perksTree = this.$store.state.summonerRunes.find(value => value.id === this.match.mainParticipant.stats.perkSubStyle);
    console.log(perksTree.slots.unshift())
    return perksTree
}

我使用以下方法迭代并显示图标:

    <div v-for='runes in this.secondaryPerks().slots'>
        <div v-for='rune in runes.runes'>
            <img :src="'https://ddragon.leagueoflegends.com/cdn/img/' + rune.icon"  alt="">
        </div>
    </div>

现在的问题是，因为该特权树是次要的，所以 slot[0] 中的特权永远无法被选取，因为如果它们被选取，它们就必须是 PrimaryPerks 树的一部分。这意味着没有必要显示它们都未被选择。因此，我尝试从数组中删除第一个 slot[0] 元素，但是，当我尝试 unshift() 它时，出现错误:

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

我不知道为什么。有什么建议吗？

Answer 1

首先，我认为你的意思是shift而不是unshift。 unshift 将尝试向数组添加项目而不是删除它们。从无限循环的 Angular 来看，这实际上并不重要，任何一种方法都会有相同的效果。

您正在创建对数组的依赖项，然后对其进行修改。修改它会触发重新渲染。

每次组件重新渲染时，它都会将另一个项目移入/移出数组。即使对 shift/unshift 的调用实际上没有改变任何内容，它仍然会被视为修改数组。

尝试:

computed: {
  secondaryPerkSlots () {
    const perksTree = this.$store.state.summonerRunes.find(
      value => value.id === this.match.mainParticipant.stats.perkSubStyle
    );

    return perksTree.slots.slice(1)
  }
}

与:

<div v-for='runes in secondaryPerkSlots'>

这将创建一个新数组，其中包含与原始数组相同的元素，但省略第一个元素。

或者，您可以将 slice(1) 直接放入模板中:

<div v-for='runes in secondaryPerks().slots.slice(1)'>

无论哪种方式，我建议将方法更改为计算属性。您还应该将 this 放入模板中。