Я пытаюсь обновить состояние всякий раз, когда начинается событие 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,
        })
    })
}
1
Joe 13 Апр 2019 в 03:11

2 ответа

Лучший ответ

Проблема была в том, когда компонент пытался визуализировать. Мне нужно было обернуть элемент <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>

);
0
Joe 14 Апр 2019 в 00:05

Здесь, на трассе, чтобы сделать ваш

this.setState({
        hotspots: hotspots,
    }) 

Работа, которую вы должны использовать, как это

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

        hotspots[h.id] = h

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

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

0
Niranjan 13 Апр 2019 в 02:08