重新加载 React Leaflet 地图的问题

Question

我的地图有问题。一张 react-leaflet 地图。当我在上面加载我的网站时会显示它。但其他方式，比如点击 link，它不会。我只是加载左上角的图块，滚动时一个一个地加载。

以前有人遇到过这个问题吗？或者有人有想法吗？

一个例子： http://www.noelshack.com/2019-02-1-1546872914-capture.png

import React, { Component } from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import './local_leaflet.css';

const mapState = {
  lat: 49.4431,
  lng: 1.0993,
  zoom: 10,
  visible: true,
  url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
};

export default () => (
  <div>
    <Map center={[mapState.lat, mapState.lng]} zoom={mapState.zoom}>
      <TileLayer url={mapState.url} />
    </Map>
  </div>
);

我已经尝试了 componentDidMount、componentDidUpdate、componentWillUnmount ... 但没有任何效果。

Answer 1

我解决了我的问题。我在 MAP 渲染中放了一个键，像这样：

  render ()
  {
    return (
      <div>
        <Map key={this.state.keyMAP} center={[this.mapState.lat, this.mapState.lng]} zoom={this.mapState.zoom}>
          <TileLayer url={this.mapState.url} />
        </Map>
      </div>
    );
  }

这是我所在州的随机密钥。随机的，像这样。

state = {
   keyMAP: Math.random(),
};

希望对其他人有所帮助！ :)

重新加载 React Leaflet 地图的问题

Probleme to reload a ReactLeaflet map

javascript

leaflet

reactjs

react-leaflet

extreact