Les polygones React-Leaflet ne sont pas rendus de nouveau

Question

J'essaie de créer des polygones dynamiques en utilisant l'état de réaction, mais les polygones de folioles ne sont pas rendus.

La cible est de créer un polygone que l'utilisateur crée en cliquant sur la carte.

class SimpleExample extends React.Component { 
constructor() { 
    super(); 
    this.state = { 
    positions: [[51.505, -0.09]] 
    }; 
} 

addPosition = (e) => { 
    const {positions} = this.state 
    console.log('Adding positions', positions) 
    positions.push([e.latlng.lat, e.latlng.lng]) 
    this.setState({positions}) 
} 

render() { 
    console.log('Should render new positions', this.state.positions) 
    const staticPositions = [[51.505, -0.09], [51.4958128370432, -0.10728836059570314], [51.49602657961649, -0.09956359863281251]] 
    return (
    <Map 
     center={[51.505, -0.09]} 
     onClick={this.addPosition} 
     zoom={13} 
     > 
     <TileLayer 
     attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
     url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
     /> 
     <Polygon positions={this.state.positions} color="blue" /> 
     <Polygon positions={staticPositions} color="red" /> 
     <Polyline positions={this.state.positions} /> 
    </Map> 
); 
} 
} 

S'il vous plaît checkout ce violon: https://jsfiddle.net/cesargdm/j2g4ktsg/1/

Answer 1

Vous pouvez copier ceci dans jsFiddle et cela devrait fonctionner. J'espère que cela aide. J'ai l'état initial à un tableau vide, donc votre premier clic décide où vous commencez à dessiner votre <Polygon>, bien sûr vous pouvez utiliser une coordonnée initiale, c'est à vous de décider. En utilisant une fonction de flèche (prevState) => {} vous pouvez mettre à jour l'état en fonction de votre "état précédent", ici nous prenons les nouvelles coordonnées et en utilisant concat() pour l'ajouter à notre état positions.

Vous trouverez plus d'informations sur la mise à jour de l'état here.

const React = window.React; 
const { Map, TileLayer, Marker, Popup, Polygon } = window.ReactLeaflet; 

class SimpleExample extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     positions: [] 
    }; 
    } 

    addPosition = (e) => { 
    const newPos = [e.latlng.lat, e.latlng.lng]; 
    this.setState(prevState => (
     { 
     positions: prevState.positions.concat([newPos]) 
     } 
    )); 
    } 

    render() { 

    return (
     <Map 
     center={[51.505, -0.09]} 
     onClick={this.addPosition} 
     zoom={13}> 
     <TileLayer attribution='&copy; <ahref="http://osm.org/copyright"> 
      OpenStreetMap</a> contributors' 
      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
     /> 
     <Polygon positions={this.state.positions} color="blue" /> 
     </Map> 
    ); 
    } 
} 
window.ReactDOM.render(<SimpleExample />, 
    document.getElementById('container'));