React - Googleマップのコンポーネントが再レンダリング後にマップを変更しない

Question

ReactでGoogleマップに問題があります。 すべてがうまくいっていますが、このマップの他の場所を再描画しようとすると、それはうまくいきません:( 私は都市を変更すると（例えば選択）新しい小道具（緯度、経度）が使用されますが、 lngのためにあなたがlngとlatの状態を設定している

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { withGoogleMap, GoogleMap, Marker } from "react-google-maps"; 

const SimpleMapExampleGoogleMap = withGoogleMap(props => { 
    console.log("here new props are used", props) 
    return <GoogleMap 
     defaultZoom={15} 
     defaultCenter={new google.maps.LatLng(props.lat, props.lng)} 
    /> 
} 
); 

class GMap extends React.Component{ 
    constructor(props) { 
     super(props); 
     this.state = { 
      lat: this.props.lat, 
      lng: this.props.lng 
     } 
    } 

    render() { 
     console.log("New props ", this.props) 

     return <SimpleMapExampleGoogleMap 
       lat={this.props.lat} 
       lng={this.props.lng} 
       containerElement={ 
        <div style={{ height: `500px` }} /> 
       } 
       mapElement={ 
        <div style={{ height: `500px` }} /> 
       } 
      /> 
    } 
} 
export { GMap } 

Answer 1

変更はできますが、マップ

=>変更this.props.latthis.state.latへのそれらを適用していない、と同じ：

return <SimpleMapExampleGoogleMap 
      lat={this.state.lat} 
      lng={this.state.lng} 
      containerElement={ 
       <div style={{ height: `500px` }} /> 
      } 
      mapElement={ 
       <div style={{ height: `500px` }} /> 
      } 
     /> 

上記のコードはまだあなたのマップを更新しない場合は、以下の方法（コンストラクタと同じレベル）を追加して自由に感じる：

constructors(props){/*...*/} 

    componentWillReceiveProps(nextProps) { 
    this.setState({ 
     lat: nextProps.lat, 
     lng: nextProps.lng, 
    }); 
    } 

    render(){/*...*/} 

にエラーがある場合もここに投稿してください、ありがとう