«У вас может быть бесконечный цикл обновления в компонентной функции рендеринга», когда я добавляю эту строку кода - console.log (perksTree.slots.unshift ())

Question

У меня есть функция, которая находит объект из JSON с идентификатором === this.match.mainParticipant.stats.perkSubStyle.Этот объект содержит свойство с именем 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

Во-первых, я думаю, что вы имеете в виду 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 в вашем шаблоне.

Answer 2

У меня была такая же проблема несколько месяцев назад.

Я думаю, что главная проблема заключается в том, что вы выполняете логику, такую ​​как arr.unshift() (которая заставит шаблон перерисовать в этом случае) в вашем вычисленном свойстве .

Итак, представьте себе:

const arr1 = [/* ... */];

// This is different
const computedArr = () => {
 return arr.filter(() => { /* ... */ });
};

// Than this
const computedArr = () => {
 const newArr = arr.filter(() => { /* ... */ });

 // Vue cannot allow this without a re-render!
 newArr.unshift();

 return newArr;
};

Последнее заставит шаблон повторноrender;

РЕДАКТИРОВАТЬ

Проверьте первый комментарий!