“当我添加以下代码行时，组件渲染函数中可能会有无限的更新循环”-console.log（perksTree.slots.unshift（））

Question

我有一个从ID === this.match.mainParticipant.stats.perkSubStyle的JSON查找对象的函数。该对象包含一个名为slots的属性，该属性是一个数组，具有4个元素。每个插槽都有3个元素，代表游戏中的符文。如果您遍历插槽及其元素，则会得到以下信息：

我使用此功能获取对象：

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>

现在的问题是，由于特权树是次要树，所以插槽[0]中的特权永远无法被选中，因为如果被选中，它们将必须是primaryPerks树的一部分。这意味着没有任何迹象表明它们均未被选中。因此，我试图从数组中删除第一个slot [0]元素，但是，当我尝试对其进行unshift（）时，会出现错误：

“组件渲染功能中可能有无限的更新循环”

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

Answer 1

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

尝试：

return perksTree.slots.slice(1)

将创建一个包含与原始数组相同元素的新数组，删除第一个元素。