MarkoJS组件中的“无法读取未定义的属性'insertInto'”错误的原因是什么？

Question

通过侦听窗口调整大小事件对组件进行一些更改时，通常会遇到上述错误。我认为发生这种情况是因为组件在更新过程中会以某种方式变脏并需要重新渲染。但是，如果需要在调整窗口大小期间更改组件的子级输入状态，怎么办？

这是错误：

helpers.js:2 Uncaught TypeError: Cannot read property 'insertInto' of undefined
    at insertBefore (helpers.js:2)
    at morphChildren (index.js:235)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:500)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphComponent (index.js:125)
    at morphChildren (index.js:246)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphdom (index.js:758)
    at Component.js:541
    at Object.batchUpdate [as ___batchUpdate] (update-manager.js:63)
    at VehicleSlider.___rerender (Component.js:523)
    at VehicleSlider.update (Component.js:477)
    at updateComponents (update-manager.js:44)
    at updateUnbatchedComponents (update-manager.js:16)
    at MfQN.module.exports (_invoke.js:5)
    at queue.<computed> (_task.js:35)
    at Number.run (_task.js:21)
    at MessagePort.listener (_task.js:25)

这是组件代码：

import { box } from "src/lib/mobx-box"
static let throttle = require("src/js/throttle-debounce").throttle

static {
    require("./VehicleSlider.scss")
}

class {
    mobxObservable() {}
    onCreate() {
        box(this, "currentSlide")
        this.currentSlide = 1
        this.state = {
            perPage: null
        }
    }

    next() {
        this.getComponent("slider").next()
    }
    prev() {
        this.getComponent("slider").prev()
    }
    sliderChange(slider) {
        this.currentSlide = slider.currentSlide
    }
    onUpdate() {
        this.updatePerPage()
    }
    onMount() {
        this.updatePerPage()

        this.subscription = this.subscribeTo(window).on("resize", throttle(()=>{
            this.updatePerPage()
            debug("RESIZE", this.state.perPage)
        }, 200, {leading: true}))

    }

    updatePerPage() {
        var sliderEl = this.getEl('vehicleSlider');
        if(sliderEl) {
            const width = sliderEl.clientWidth
            const items = Math.floor(width / 270)
            this.setState('perPage', items)
        }
    }
}
<div key='vehicleSlider' class="vehicle-slider">
    <button class="slick-prev slick-arrow" aria-label="Previous" type="button" on-click('prev')>Previous</button>
    <if(state.perPage >= 1)>
    <Slider key='slider' loop auto=0 duration=600 style={'flex-grow': '1'} perPage=state.perPage  on-change('sliderChange')>
        <for(vehicle in input.vehicles)>
            <@slide> <${vehicle.renderBody}/> </>
        </for>
    </Slider>
    </if>

    <button class="slick-next slick-arrow" aria-label="Next" type="button" on-click('next')>Next</button>
</div>