React / Leaflet - Ошибка: контейнер карты уже инициализирован

Question

Я пытаюсь создать компонент живой карты, используя Leaflet в React (примечание: я не использую React-Leaflet).

Я довольно новичок в React, поэтому заранее прошу прощения за мой грязный код и / или если я тупой. Каждый раз, когда я компилирую приложение, карта работает в течение доли секунды, а затем выдает сообщение «Ошибка: контейнер карты уже инициализирован». Ошибка остается и повторяется, пока приложение работает.

Вот мой код (я вынул свой токен доступа MapBox для этой темы):

import React from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

let mymap;

export class Map extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      x: 0,
      y: 0,
      id: null
    }
  }


  componentDidMount() {
    this.getLocation();
  }

  componentWillUnmount() {
      navigator.geolocation.clearWatch(this.id);
      mymap.remove();
  }


  getLocation() {
    if (navigator.geolocation) {
      const success = (position) => {
        const xlocation = position.coords.latitude;
        const ylocation = position.coords.longitude;
        console.log("x: " + xlocation + " y: " + ylocation);
        this.setState({
          x: xlocation
        });
        this.setState({
          y: ylocation
        });
        console.log(this.state.x);
        mymap = L.map('mapid').setView([this.state.x, this.state.y], 13);

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        accessToken: 'redacted'
    }).addTo(mymap);
      };

      const options = {enableHighAccuracy: true, maximumAge: 10000};

      this.id = navigator.geolocation.watchPosition(success, (err) => {console.error('ERROR(' + err.code + '): ' + err.message)}, options);
    }
  }



  render(){

    return (
      <div id="mapid" className="responsive-map"></div>
    );
  }
}

Если кто-нибудь может мне помочь разберись, что я недопонимаю, что было бы здорово! Спасибо :)

Answer 1

Вы не должны использовать переменные вне класса. Если вы хотите сохранить некоторую переменную в классе, вы должны определить его в конструкторе как

constructor(props) {
  super(props);
  this.state = {
    x: 0,
    y: 0,
    id: null
  }
  this.map = null;
}

Также вы не можете использовать вызовы типа

this.id

потому что вы определяете их, выбрасываете состояние, поэтому вы должны позвонить

this.state.id

И я определенно рекомендую вам начать использовать листовка - это гораздо проще понять