this.state не определено в initMap

Я использовал функцию initMap() для отображения карты Google в реакции js. Я хочу обновить состояние при щелчке карты. моя проблема в том, что когда я использую this.setState() внутри функции initMap(), она выдает ошибку TypeError: Cannot read property 'setState' of undefined. подскажите, могу ли я реализовать это другим способом.

import {
  Map,
  InfoWindow,
  GoogleApiWrapper,
  LoadingContainer,
  Marker,
} from "google-maps-react";
class DrawingMap extends React.Component {
  constructor(props) {
    super(props);
    this.initMap = this.initMap.bind(this);
    this.state = {
      latLngList: [],
    };
  }
  initMap(mapProps, map) {
    var self = this;
    const { google } = mapProps;
    var poly;
    let label = 1;
    console.log(this.state);
    function addCircle(location) {
      let latlng = {};
      latlng.lat = location.lat();
      latlng.lng = location.lng();
      this.setState({
        latLngList: latlng,
      });
      var square = {
        path: google.maps.SymbolPath.CIRCLE,
        strokeColor: "orange",
        fillColor: "orange",
        fillOpacity: 1,
        scale: 10,
      };
      var marker = new google.maps.Marker({
        position: location,
        map: map,
        icon: square,
        label: {
          text: label.toString(),
          fontWeight: "bold",
        },
      });
      label++;
    }
    poly = new google.maps.Polyline({
      strokeColor: "orange",
      strokeOpacity: 1.0,
      strokeWeight: 5,
    });
    poly.setMap(map);
    if (toggle) poly.setMap(null);
    google.maps.event.addListener(map, "click", function (event) {
      var path = poly.getPath();
      path.push(event.latLng);
      addCircle(event.latLng);
    });
  }
  render() {
    return (
      <Map
        google={this.props.google}
        onReady={this.initMap}
        initialCenter={{ lat: 19.993982, lng: 73.790416 }}
        mapType={"hybrid"}
        zoom={15}
      ></Map>
    );
  }
}
export default GoogleApiWrapper({
  apiKey: key,
  libraries: ["drawing"],
  LoadingContainer: LoadingContainer,
})(DrawingMap);


person vijay kasar    schedule 18.07.2020    source источник
comment
Вы пытались изменить addCircle на функцию стрелки?   -  person Aref Ben Lazrek    schedule 18.07.2020
comment
да, я пробовал использовать функцию стрелки, но выдает ошибку 'addCircle' is notdefined no-undef   -  person vijay kasar    schedule 18.07.2020


Ответы (1)


React.Component не привязывает методы к себе автоматически.
Чтобы решить эту проблему, вы либо заменяете addCircle на функцию стрелки, но также сопоставляете прослушиватель событий щелчка
или проще, просто используя сохраненную ссылку, например Демо

import React, { Component } from "react";
import {
  Map,
  InfoWindow,
  GoogleApiWrapper,
  LoadingContainer,
  Marker,
} from "google-maps-react";
class DrawingMap extends React.Component {
  constructor(props) {
    super(props);
    this.initMap = this.initMap.bind(this);
    this.state = {
      latLngList: [],
    };
  }
  initMap(mapProps, map) {
    var self = this;
    const { google } = mapProps;
    var poly;
    let label = 1;
    console.log(this.state);
    function addCircle(location) {
      let latlng = {};
      latlng.lat = location.lat();
      latlng.lng = location.lng();
      self.setState({
        latLngList: latlng,
      });
      var square = {
        path: google.maps.SymbolPath.CIRCLE,
        strokeColor: "orange",
        fillColor: "orange",
        fillOpacity: 1,
        scale: 10,
      };
      var marker = new google.maps.Marker({
        position: location,
        map: map,
        icon: square,
        label: {
          text: label.toString(),
          fontWeight: "bold",
        },
      });
      label++;
    }
    poly = new google.maps.Polyline({
      strokeColor: "orange",
      strokeOpacity: 1.0,
      strokeWeight: 5,
    });
    poly.setMap(map);
    //if (toggle) poly.setMap(null);
    google.maps.event.addListener(map, "click", function (event) {
      var path = poly.getPath();
      path.push(event.latLng);
      addCircle(event.latLng);
    });
  }
  render() {
    return (
      <Map
        google={this.props.google}
        onReady={this.initMap}
        initialCenter={{ lat: 19.993982, lng: 73.790416 }}
        mapType={"hybrid"}
        zoom={15}
      ></Map>
    );
  }
}
export default GoogleApiWrapper({
  apiKey: key,
  libraries: ["drawing"],
  LoadingContainer: LoadingContainer,
})(DrawingMap);
person Aref Ben Lazrek    schedule 18.07.2020
comment
Благодарность! наконец решил эту проблему, используя функцию стрелки. - person vijay kasar; 18.07.2020