React - Google地圖組件在重新渲染後沒有更改地圖

我在React中的Google地圖存在問題。一切正常，但是，當我嘗試重新呈現其他地方在這張地圖它不起作用:( 我的意思是當我改變城市（例如選擇）使用新的道具（經度，緯度），但城市之一地圖不是改變React - Google地圖組件在重新渲染後沒有更改地圖

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 }

來源

2017-05-23 Agata

您已經爲lng和lat設置狀態，但你沒有地圖

=>變化this.props.lat到this.state.lat上應用他們，同爲lng：

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(){/*...*/}

如果有錯誤還請張貼在這裏，感謝

來源

2017-05-23 08:37:19 thinhvo0108

非常感謝你* 100 :)它的工作原理， Omg我沒有想到componentWillReceiveProps 你讓我的一天:) PS沒有錯誤:) – Agata

不客氣，很高興你讓它工作^^！有關ReactJS或Google/Leaflet地圖的更多問題，請隨時與我聯繫！ – thinhvo0108

React - Google地圖組件在重新渲染後沒有更改地圖

回答

相關問題