В чем причина ошибки «Не удается прочитать свойство« insertInto »неопределенного» в компоненте MarkoJS? - PullRequest
Новая
       69

В чем причина ошибки «Не удается прочитать свойство« insertInto »неопределенного» в компоненте MarkoJS?

0 голосов
/ 21 октября 2019

Обычно я сталкиваюсь с вышеуказанной ошибкой при внесении некоторых изменений в компонент при прослушивании события изменения размера окна. Я думаю, что это происходит из-за того, что компонент обновляется во время обновления и нуждается в повторной визуализации. Но каково решение, если требуется изменить дочернее состояние компонента во время изменения размера окна?

Вот ошибка: 

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>
...