NotFoundError: Узел не был найден в removeChild ()

Question

Я пытаюсь обновить состояние всякий раз, когда начинается событие track (tracking.js). После того, как я беру все перемещенные объекты и пытаюсь снова добавить их в состояние, я получаю NotFoundError: Node was not found. Я думаю, что это может быть потому, что я ссылаюсь на неправильный this, но ранее, если я ссылаюсь this.state.hotspots без проблемы

componentDidMount () {
    tracking.ColorTracker.registerColor('red', function(r, g, b) {
        if (r > 175 && g < 90 && b < 90) {
            return true;
        }
        return false;
    });

    this.tracker = new window.tracking.ColorTracker("red")

    $('#img').reel({
        frames: "360",
        images: "src/components/cascadion/pics/cascadion/Cascadio2017 360 turn 06__####.png",
    })

    this.tracker.on('track', event => {

        let hotspots = JSON.parse(JSON.stringify(this.state.hotspots))

        this.state.hotspots.map(function(hotspot){
            var cords = event.data.reduce((acc, point) => {
                if (point.x == hotspot.x && point.y == hotspot.y){
                    return point
                } else {
                    return (
                        Math.abs(acc.x - hotspot.x) > Math.abs(point.x - hotspot.x) && Math.abs(acc.y - hotspot.y) > Math.abs(point.y - hotspot.y)
                    ) ? point : acc;
                }
            }, hotspot);

            var h = hotspots.find(function(element) {
              return element.hotspot_id == hotspot.hotspot_id;
            });

            h.x = cords.x
            h.y = cords.y

            hotspots[h.id] = h

        })

        this.setState({
            hotspots: hotspots,
        })
    })
}

Answer 1

Проблема была в том, когда компонент пытался выполнить рендеринг.Мне нужно было обернуть элемент <img/> в его собственный div:

Это не работает:

var CascadionImg = ({click}) => (
        <img 
            id="img"
            width="850"
            height="600"
            ref={img => this.img = img}
            src={pic}
            onClick={click}
        />

);

Это работает:

var CascadionImg = ({click}) => (
    <div>
        <img 
            id="img"
            width="850"
            height="600"
            ref={img => this.img = img}
            src={pic}
            onClick={click}
        />
    </div>

);

Answer 2

Здесь, на дорожке, чтобы заставить

this.setState({
        hotspots: hotspots,
    }) 

работать, вам нужно использовать его вот так

        h.x = cords.x
        h.y = cords.y

        hotspots[h.id] = h

     this.setState({
        hotspots: hotspots,
    })
    })
})

, но если вы хотите использовать в предыдущем месте, вынеобходимо указать с помощью 'this.state.hotspots'