React中react-hook-google-maps首次加载正常切换国家后地图不更新

问题根因 #

• useGoogleMaps钩子的初始化配置仅在组件首次挂载时生效，后续传入的lat、lang参数更新时，钩子不会自动同步修改已创建的地图实例的中心点。
• 父组件遍历渲染Maphook时未设置唯一key，React会默认按索引复用组件实例，不会触发组件重新挂载初始化新地图。

修复方案 #

1. 改造Maphook组件，新增副作用监听经纬度变化，手动更新地图中心点：

import { useEffect } from 'react';

const Maphook = ({ lat, lang }) => {
    const { ref, map, google } = useGoogleMaps(
        "",
        {
            center: { lat: lat, lng: lang },
            zoom: 3,
        },
    );

    // 经纬度变化时手动更新地图位置
    useEffect(() => {
        if (map) {
            map.setCenter({ lat, lng: lang });
            // 如需同步重置缩放可取消注释下行
            // map.setZoom(3);
        }
    }, [lat, lang, map]);

    return <div ref={ref} style={{ width: 400, height: 300 }} />;
};

2. 父组件遍历渲染时给Maphook添加唯一key，避免组件错误复用：

建议使用国家唯一标识（如国家代码cca2、国家名称）作为key，不要用索引

{
    countries.map(({ latlng, cca2 }) => {
        const [lat, lang] = latlng;
        return <Maphook key={cca2} lat={lat} lang={lang} />
    })
}

3. 额外优化：如果每次仅查询一个国家，不需要用map遍历，直接取最新的国家数据传入Maphook即可，避免渲染多余地图实例。

内容的提问来源于stack exchange，提问作者Jawad Hussain