如何在React上更新谷歌地图的位置

Question

我在一个Google Map组件中使用，在主组件中发送道具（坐标作为数组），最后第二个组件（地图）重新使用了这个，我想在地图上显示新的位置。

不幸的是，这没有工作，坐标，正确地改变和组件（地图）累加，但没有刷新。因为当尝试这样做时，地图是白色的（空的），没有什么可显示的

>

LAT和Lng以一个坐标开始，setState放入一个新的

不要把整个组件，但这是我调用映射的方式

render() {
return (
    <div className="main">
        <div className="main__map">
            <TheMap center={[this.state.lat, this.state.lng]} />
        </div>

Map组件

import React from 'react'
import GoogleMapReact from 'google-map-react';

function TheMap(props){
    const MyCustomMarker = () => <span class="material-icons">place</span>;
    return(
        <GoogleMapReact
            yesIWantToUseGoogleMapApiInternals
            bootstrapURLKeys={{key:'THE KEY'}}
            defaultZoom={16}
            center={props.center}
        >
            <MyCustomMarker
                lat={props.center[0]}
                lng={props.center[1]}
            />
        </GoogleMapReact>
    )
}

export default TheMap

Answer 1

您可以使用钩子，useEffect()可以使用更新的道具重新编辑组件。下面是代码段。

import React,{useState , useEffect} from 'react';
import GoogleMapReact from 'google-map-react';

function TheMap(props){
    const [cordinates , setCordinates] = useState(props);
    const MyCustomMarker = () => <span class="material-icons">place</span>;
    
    useEffect(() => {
       setCordinates(props);
   }, [props])
   
    return(
        <GoogleMapReact
            yesIWantToUseGoogleMapApiInternals
            bootstrapURLKeys={{key:'THE KEY'}}
            defaultZoom={16}
            center={cordinates.center}
        >
            <MyCustomMarker
                lat={cordinates.center[0]}
                lng={cordinates.center[1]}
            />
        </GoogleMapReact>
    )
}

export default TheMap