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

Question

你好，我是编码的新手，我遇到了一个我无法解决的问题。我有一个 MapBox 地图，它加载了每个 lat/lon 和半径的事件图标。使用 React 我创建了一个 Map 组件，并在地图组件中添加了一个 mouseup 事件，当用户单击地图时它会获取纬度和地段，我想获取这些值并将它们输入到 loadIncidentsAndRoads 函数中，该函数获取事件 api 呼叫。我的问题是 this.props.incidentsActions.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

一旦进入 function，this 的含义就不会保留。您可以尝试使用箭头函数，它保留了 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)
           );

        });

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

"this.props" not working in my on mouseup event function in Map Component using react and mapbox-gl

reactjs

mapbox-gl