React应用Geocode获取新经纬度后GoogleMapReact地图中心未更新

google-map-react中所有带default前缀的属性都是非受控属性，仅在组件首次挂载时读取传入值作为初始配置，后续组件重渲染、传入值更新时，这类属性不会响应变化。
你的代码中defaultCenter只会在第一次渲染时读取初始值lat:0, lng:0作为地图中心点。后续useEffect里地理编码接口请求完成，虽然state更新触发了组件重渲染，但defaultCenter不会重新读取新的经纬度，所以地图会一直停在初始坐标位置。

将defaultCenter替换为受控属性center即可。center属性会实时响应传入值的变化，在经纬度更新后自动调整地图中心点。
修正后的代码：

const CustomMap = () => {
const [customLat, setCustomLat] = useState(0);
const [customLng, setCustomLng] = useState(0);

useEffect(() => {
    Geocode.fromAddress("Eiffel Tower").then(
        (response) => {
            const { lat, lng } = response.results[0].geometry.location;
            setCustomLat(lat);
            setCustomLng(lng);
        },
        (error) => {
            console.log(error.data);
        }
    );

}, [])

return (
    <GoogleMapReact
        bootstrapURLKeys={{ key: 'API_KEY' }}
        center={{ lat: customLat, lng: customLng }}
        defaultZoom={11}>
    </GoogleMapReact>
)
}

补充：defaultZoom属于非受控的初始缩放级别配置，如果你不需要后续动态修改地图缩放等级可以保留；如果需要动态控制缩放，同理替换为受控属性zoom即可。

内容的提问来源于stack exchange，提问作者Ivana Murray