リアクションリーフレットポリゴンが再レンダリングされていません

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