javascript - 当我添加以下代码行时，“组件渲染函数中可能存在无限更新循环”-console.log(perksTree.slots.unshift())

我有一个函数，可从具有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>

现在的问题是，因为特权树是次要树，所以无法选择slot [0]中的特权，因为如果选择了这些特权，它们将必须是primaryPerks树的一部分。这意味着没有一点显示没有选择任何对象。因此，我试图从数组中删除第一个slot [0]元素，但是，当我尝试对其进行unshift（）时，出现错误：


  “您可能在组件渲染函数中有一个无限的更新循环”


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

最佳答案

首先，我认为您的意思是shift而不是unshift。 unshift将尝试将项目添加到数组中，而不是删除它们。从无限循环的角度来看，这实际上并不重要，这两种方法都会产生相同的效果。

您要在数组上创建一个依赖项，然后对其进行修改。对其进行修改将触发重新渲染。

每次组件重新渲染时，它将另一个项移入/移出数组。即使对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放在模板中。

关于javascript - 当我添加以下代码行时，“组件渲染函数中可能存在无限更新循环”-console.log(perksTree.slots.unshift())，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58120385/