Блог

Я использую компонент Vue для отображения заголовка некоторой таблицы следующим образом:

 render (createElement) {
  return createElement('div', { class: 'header' },
    Array.apply(null, { length: this.initHours.length }).map(() => {
      return createElement('div', { class: 'frame' }, this.getHourIndex() )
    })
  )
}
 

Проблема в том, что при консоли.журнал, выполняемый в hourIndex (который проходит через массив), проходит бесконечный цикл.

Функция getHourIndex :

 getHourIndex () {
  const headerData = this.initHours[this.hourIndex]
  this.hourIndex  
  console.log(this.hourIndex) /// this is what's telling me it's an infinite loop
  return headerData
}
 

Любая информация о том, почему это делает этот бесконечный цикл (учитывая, что массив hourIndex содержит всего 25 элементов), будет оценена по достоинству.

Всякий раз, когда компонент отображает реактивные данные, он также должен повторно отображать эти данные, если они изменяются. Это часть реактивности. Таким образом, сам процесс рендеринга никогда не должен изменять данные, иначе будет бесконечный цикл: 1) рендеринг, 2) изменения данных, 3) вызывает повторный рендеринг, 4) изменения данных, до бесконечности.

Это то, что происходит в этом коде, потому что функция визуализации увеличивается this.hourIndex :

 this.hourIndex  
 

Если вам просто нужен индекс, возьмите его из map :

 Array.apply(null, { length: this.initHours.length }).map((_, index) => {
  return createElement('div', { class: 'frame' }, index )
})