«this.props» не работает в моей функции события mouseup в компоненте карты, использующей реагировать и mapbox-gl

Question

Здравствуйте, я довольно новичок в кодировании, и у меня возникла проблема, которую я не могу решить. У меня есть карта MapBox, которая загружается с иконками инцидентов по широте и долготе и радиусу. Используя «Реакцию», я создал компонент «Карта», а в компоненте «Карта» я добавил событие 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

Значение 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)
           );

        });

Если это все еще проблематично c, это означает, что функция 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)
           );

        });