React.js应用程序中的Mapbox-gl，TypeError：无法读取未定义的属性'setFeatureState'

Question

需要在我的地图上创建悬停效果，我正在按照此教程进行操作：https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/

不幸的是，我想出了一个我无法解决的错误，请在错误堆栈下方查看：

Uncaught TypeError: Cannot read property 'setFeatureState' of undefined
    at r.<anonymous> (Map.js:219)
    at r.delegates.o.<computed> (mapbox-gl.js:23210)
    at r.St.fire (mapbox-gl.js:915)
    at HTMLDivElement.<anonymous> (mapbox-gl.js:23021)

也请参见错误页面的图片：

我将在下面添加源代码：

    setMapLayer(){

        if (!this.map.loaded() || this.state.searchedPhrase === '') return

        var contours = importContours(this.state.mapType)
        var contoursWithData = addData(contours, this.state.mapType, this.state.searchedPhrase)
        contoursWithData.then((data)=>{
            var mpSource = this.map.getSource("contours")

            if (typeof mpSource === 'undefined') 
                this.map.addSource('contours', { type: 'geojson', data })
            else 
                this.map.getSource("contours").setData(data)

            var mpLayer = this.map.getLayer("contours")

            if (typeof mpLayer === 'undefined') {
                this.map.addLayer({
                    id: 'contours',
                    type: 'fill',
                    source: 'contours',
                    layout: {},
                    paint: {
                        'fill-opacity': [
                            'case',
                            ['boolean', ['feature-state', 'hover'], false],
                            0.7,
                            0.4
                        ]
                    }
                }, 'country-label-lg')

                this.map.addLayer({
                    id: 'state-borders',
                    type: 'line',
                    source: 'contours',
                    layout: {},
                    paint: {
                        'line-color': '#c44cc0',
                        'line-width': 0.5
                    }
                })
            }

            var hoveredStateId = null

            // When the user moves their mouse over the state-fill layer, we'll update the
            // feature state for the feature under the mouse.
            this.map.on('mousemove', 'contours', function(e) {
                if (e.features.length > 0) {
                    if (hoveredStateId) {
                        console.log('hoveredStateId ',hoveredStateId)
                        this.map.setFeatureState(
                            { source: 'contours', id: hoveredStateId },
                            { hover: false }
                        )
                    }
                    console.log('e.features[0]',e.features[0])
                    console.log('e.features[0].id',e.features[0].id)
                    hoveredStateId = e.features[0].id
                    console.log('s',hoveredStateId)
                    this.map.setFeatureState(
                        { source: 'contours', id: hoveredStateId },
                        { hover: true }
                    )
                }
            })

            // When the mouse leaves the state-fill layer, update the feature state of the
            // previously hovered feature.
            this.map.on('mouseleave', 'contours', function() {
                console.log('jestem 2')

                if (hoveredStateId) {
                    this.map.setFeatureState(
                        { source: 'contours', id: hoveredStateId },
                        { hover: false }
                    )
                }
                hoveredStateId = null
            }) 

            console.log('jestem 3 ',hoveredStateId )
            this.setLegend(data)
            this.setFill() 


        })
    }

添加console.log以进行调试。

有人看到问题了吗？

Answer 1

这是因为您要创建新函数并创建this的新实例。将其更改为箭头功能-

this.map.on('mousemove', 'contours', (e) => {  //arrow function//
                if (e.features.length > 0) {
                    if (hoveredStateId) {
                        console.log('hoveredStateId ',hoveredStateId)
                        this.map.setFeatureState(
                            { source: 'contours', id: hoveredStateId },
                            { hover: false }
                        )
                    }
                    console.log('e.features[0]',e.features[0])
                    console.log('e.features[0].id',e.features[0].id)
                    hoveredStateId = e.features[0].id
                    console.log('s',hoveredStateId)
                    this.map.setFeatureState(
                        { source: 'contours', id: hoveredStateId },
                        { hover: true }
                    )
                }
            })