React-Leaflet多邊形不會被重新渲染

Question

我試圖通過使用反應的狀態來製作動態多邊形，但是單張多邊形不會被重新渲染。

目標是創建用戶在地圖上創建點擊的多邊形。

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> 
); 
} 
} 

請結帳此琴： https://jsfiddle.net/cesargdm/j2g4ktsg/1/

Answer 1

可以在的jsfiddle複製此，它應該工作。希望能幫助到你。

我的初始狀態爲空數組，因此您的第一次單擊決定您開始繪製<Polygon>的位置，當然，您可以使用初始座標，這完全取決於您。

使用箭頭功能(prevState) => {}您可以根據您的「先前狀態」正確更新狀態，此處我們將採用新座標並使用concat()將其添加到我們的positions狀態。

你可以找到更多關於更新狀態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'));