VueJS, бесконечный цикл создания объекта и ошибка: превышен максимальный размер стека вызовов

В прошлый раз я задал похожий, но более сложный вопрос. Здесь я хочу спросить об одной конкретной проблеме.

Есть функция, которая принимает объект в качестве входных данных:

onFormSubmit (data) {
      const newObj = {
        ...data,
        id: Math.random()
      }
      if (!data.leader) {
        this.list.push(newObj)
        this.saveList()
      } else {
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].id === data.leader) {
            this.list[i].children.push(newObj)
            this.saveList()
          }
        }
      }
    }

saveList () {
      const parsed = JSON.stringify(this.list)
      localStorage.setItem('list', parsed)
    }

Вход:

{leader: 42, name: "Name", number: "12345", id: "", children: Array(0)}

Структура данных:

data: () => ({
    list: [{
      leader: '',
      name: 'Silvia',
      number: +54321236576,
      id: 17,
      children: [{
        leader: 17,
        name: 'Joe',
        number: +87653459809,
        id: 191,
        children: []
      }]
    },
    {
      leader: '',
      name: 'Victor',
      number: +98765434560,
      id: 42,
      children: [{
        leader: 42,
        name: 'Sam',
        number: +145735643798,
        id: 202,
        children: [{
          leader: 202,
          name: 'Mona',
          number: +77774352309,
          id: 2092
        }]
      }]
    }]
  }),

Задача функции - добавить этот объект в массив объектов, на верхний уровень, если !data.leader = true, или как дочерний элемент, если !data.leader = false.

Новый элемент добавлен правильно.

Новый дочерний элемент правильно добавлен к предварительно записанным данным.

Но при попытке добавить потомка к вновь созданному элементу возникает бесконечный цикл и возникает ошибка. Функция начинает бесконечно создавать копию объекта.

Что я делаю не так?


javascript runtime-error error-handling vue.js callstack
person Aleksandr Evmenov    schedule 27.01.2021    source источник
comment
У вас есть какое-либо свойство computed, большую часть времени бесконечные циклы происходят из рекурсивного вызова в вычисленных свойствах.   -  person Millennium Fennec    schedule 27.01.2021
comment
@localdev у меня есть это: computed: {isEmpty () {return! Object (this.list) .length}} он проверяет, является ли объект пустым, и влияет на отображение предупреждения.   -  person Aleksandr Evmenov    schedule 27.01.2021

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, я решил это так:

onFormSubmit (data) {
      let newId = Math.floor(Math.random() * 100) + data.leader
      let newObj = {}
      newObj = {
        ...data,
        id: newId
      }
      if (!data.leader) {
        this.list.push(newObj)
        this.saveList()
      } else {
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].id === newObj.leader) {
            this.list[i].children = [newObj]
            this.saveList()
          }
        }
      }
    },
person Aleksandr Evmenov    schedule 02.02.2021