1

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

不幸的是，这不起作用，坐标正确更改并且组件（地图）正确接收但没有刷新。因为当尝试这个时，地图是白色的（空的），没有什么可显示的

我怎样才能做到这一点？

主要部件

  • Lat 和 Lng 以坐标开始，而 setState 则放置一个新的

  • 不要放置整个组件，但这是我调用地图的方式

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

地图组件

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
4

1 回答 1

3

您可以使用钩子，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
于 2020-06-06T07:52:01.040 回答