gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 00:36:07 25 4
gpt4 key购买 nike

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

enter image description here

我使用此函数获取对象:

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"

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

最佳答案

首先,我认为你的意思是shift而不是unshiftunshift 将尝试向数组添加项目而不是删除它们。从无限循环的 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 放入模板中。

关于javascript - "You may have an infinite update loop in a component render function"当我添加这行代码时 - console.log(perksTree.slots.unshift()),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58120385/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com