Rendering GeoJSON mit reagieren-Faltblatt

Question

ich einfache Komponente habe Punkt auf der Karte auswählen und dann einige GeoJSON Daten zu diesem Punkt anzeigen:

import React, { Component } from 'react'; 

import { Map, Marker, TileLayer, GeoJSON } from 'react-leaflet'; 
import 'leaflet/dist/leaflet.css'; 

import { connect } from 'react-redux'; 
import './style.css'; 

import { setPoint, fetchData } from '../../actions/map'; 

@connect(store => { 
    return { 
    map: store.map 
    } 
}) 
class MyMap extends Component { 

    mapClick(e) { 
    this.props.dispatch(setPoint(e.latlng)); 
    this.props.dispatch(fetchData(e.latlng)); 
    } 

    render() { 
    const marker =() => { 
     if(this.props.map.point) { 
     return <Marker position={this.props.map.point} />; 
     } 
    }; 

    const data =() => { 
     if(this.props.map.data.length > 0) { 
      const json = this.props.map.data; 
      return <GeoJSON data={json} /> 
     } 
    } 

    return (
     <div className='my-map'> 
     <div className='my-map__map-container'> 
      <Map center={this.props.map.center} zoom={13} onClick={this.mapClick.bind(this)}> 
      <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' /> 
      {marker()} 
      {data()} 
      </Map> 
     </div> 
     <div className='my-map__debug'> 
      {JSON.stringify(this.props.map)} 
     </div> 
     </div> 
    ); 
    } 
} 

export default MyMap; 

Zum ersten Mal dann auf Kartenmarkierung Ich klicken erscheint und nach einiger Verzögerung (XHR-Anfrage) rendert GeoJSON. Aber wenn ich das nächste Mal auf die Karte klicke, habe ich nur Änderungen an der Markerposition, aber alte GeoJSON-Daten bleiben auf der Karte. Debug-Teil der Komponente wird ordnungsgemäß gerendert und zeigt korrekte Daten an. Wie kann ich react-leaflet zwingen, meine GeoJSON-Daten neu zu rendern oder mache ich etwas falsch?

UPD:

Nach Autor von react-leafet fragen Ich habe festgestellt, wie das erwartete Verhalten zu erreichen.

Um zu erzwingen, reagieren meine GeoJSON Daten, die ich einige Daten-uniq Schlüssel zur Komponente passieren müssen, um wieder zu machen:

<GeoJSON key={keyFunction(this.props.map.data.json)} data={this.props.map.data.json} /> 

https://github.com/PaulLeCam/react-leaflet/issues/332#issuecomment-304228071

Answer 1

Nach Autor von react-leafet fragen Ich habe festgestellt, wie das erwartete Verhalten zu erreichen.

Um zu erzwingen, reagieren meine GeoJSON Daten, die ich einige Daten-uniq Schlüssel zur Komponente passieren müssen, um wieder zu machen:

<GeoJSON key={keyFunction(this.props.map.data.json)} data={this.props.map.data.json} /> 

https://github.com/PaulLeCam/react-leaflet/issues/332#issuecomment-304228071

Answer 2

Nachdem Sie Ihre Marker und GeoJSON von einer Funktion aufgerufen, die bekommt erstellt jedes Mal, wenn die Rendermethode aufgerufen wird, wird nicht sehr performant sein. Außerdem denke ich, dass Sie Ihren Kartenelementen möglicherweise einen Schlüssel hinzufügen müssen, damit sie wiederverwendet und ordnungsgemäß aktualisiert werden können.

Probieren Sie dies aus:

render() { 

    return (
     <div className='my-map'> 
     <div className='my-map__map-container'> 
      <Map center={this.props.map.center} zoom={13} onClick={this.mapClick.bind(this)}> 
      <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' /> 
      {this.props.map.point && 
       <Marker key='my-marker' position={this.props.map.point} /> 
      } 
      {this.props.map.data.length > 0 && 
       <GeoJSON key='my-geojson' data={this.props.map.data.json} /> 
      } 
      </Map> 
     </div> 
     <div className='my-map__debug'> 
      {JSON.stringify(this.props.map)} 
     </div> 
     </div> 
    ); 
    } 

Answer 3

import hash from 'object-hash'; 

render() { 
let blah = this.state; //or this.props or whatever 
<GeoJSON 
    key={hash(blah)} 
    data={blah} />