"this.props "在地图组件中使用react和mapbox-gl的on mouseup事件函数中不起作用。

Question

你好，我是一个很新的编码，我有一个问题，我无法解决。 我有一个MapBox地图，加载事件图标每latlon和半径。 使用react，我创建了一个地图组件，在地图组件中，我添加了一个mouseup事件，当用户点击地图时，抓取纬度和地段，我想采取这些值，并将其馈送到loadIncidentsAndRoads函数，获取事件api调用。我的问题是，this.props.incidentActions.loadIncidentsAndRoads(metroId, tmcMetro, setCoords)在mouseup事件中无效，但如果你在mouseup事件之外执行该函数，它就会工作。 我真的不知道需要什么来帮助任何答案，所以如果你需要更多的信息，请让我知道，我会提供他们。

    <Map
      center={center}
      zoom={zoom}
      minZoom={4}
      maxZoom={20}
      style={''}
      onStyleLoad={map => {
        map.addSource('trafficTiles', trafficTiles);
        window.map = map;
        window.addEventListener('resize', this._resizeMap.bind(null, map));
        map.addControl(new mapboxgl.FullscreenControl({container: document.querySelector('body')}), "top-right");
        map.on('mouseup', function (e) {
           const getCoords = e.lngLat.wrap();
           console.log(getCoords);
           const setCoords = [getCoords.lng, getCoords.lat];
           console.log(setCoords);
           const metroId = 140;
           const tmcMetro = 45;
           return(
   //this load Incident function does not work because of the this.props is not valid
             this.props.incidentActions.loadIncidentsAndRoads(metroId, tmcMetro, setCoords)
           );
        });
        const metroId = 140;
        const tmcMetro = 45;
   // this load Incident function works but just with hard coded values.
        this.props.incidentActions.loadIncidentsAndRoads(metroId, tmcMetro, setCoords);
      }}
      onDrag={this._onDrag}
      onMoveEnd={this._setMove.bind(this, true)}
      onMove={this._setMove.bind(this, false)}
      containerStyle={mapWrapper}>
      <ZoomControl
         style={{margin: '95px 10px'}}
         zoomDiff={1}
         onControlClick={this._onControlClick}/>
      <Source
         id="source_id"
         tileJsonSource={trafficTiles}/>
      <Layer
         id="trafficTiles"
         sourceId="source_id"
         type="raster"
         layerOptions={{
           "source-layer": "trafficTiles"
         }}
         layout={{}}
           paint={{"raster-opacity": 1.0}}/>

Answer 1

意思是 this 是不保留的，一旦进入 function. 你可以尝试使用一个箭头函数，它保留了 this:

map.on('mouseup', (e) => {
           const getCoords = e.lngLat.wrap();
           const setCoords = [getCoords.lng, getCoords.lat];
           const metroId = 140;
           const tmcMetro = 45;

           return(
             this.props.incidentActions.loadIncidentsAndRoads(metroId, tmcMetro, setCoords)
           );

        });

如果这仍然是个问题，那就意味着： map.on 函数没有保留 this而你必须用另一种方式来传递它。 在你的组件中，在你的 return(...)，你可以分解 incidentActions 从你的道具，直接使用。

// before return( ... ) of the component
const { incidentActions } = this.props

//back within your <Map>
map.on('mouseup', function (e) {
           const getCoords = e.lngLat.wrap();
           const setCoords = [getCoords.lng, getCoords.lat];
           const metroId = 140;
           const tmcMetro = 45;

           return(
             incidentActions.loadIncidentsAndRoads(metroId, tmcMetro, setCoords)
           );

        });