我正在使用 Vue 组件来渲染一些表头，如下所示：
render (createElement) {
return createElement('div', { class: 'header' },
Array.apply(null, { length: this.initHours.length }).map(() => {
return createElement('div', { class: 'frame' }, this.getHourIndex() )
})
)
}
问题是，当 console.log 在 hourIndex （通过数组运行）上完成时，将进入无限循环。
The 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 )
})
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
