react应用中高德地图视图更新失败的解决方案
在React项目中集成高德地图时，地图视图更新问题时有发生。例如，当React子组件接收父组件传递的多边形路径props后，地图无法实时显示多边形，必须重新创建地图实例才能生效。
解决方法是利用useState钩子保存地图实例。
步骤：
-
保存地图实例: 使用
useState钩子创建一个状态变量map，用于存储高德地图实例。
const MyMapComponent = () => {
const [map, setMap] = useState(null);
useEffect(() => {
const newMap = new AMap.Map("mapContainer", { ...options });
setMap(newMap);
return () => { newMap.destroy(); } // 清理地图实例
}, []);
return ;
};
这里添加了useEffect的清理函数，在组件卸载时销毁地图实例，避免内存泄漏。
-
在子组件中操作地图: 在子组件中，通过
useMemo钩子访问map状态，并使用该实例操作地图。
const MyPolygonComponent = (props) => {
const map = useMemo(() => props.map, [props.map]);
useEffect(() => {
if (map && props.polygonPath) { // 添加判断条件，防止map未初始化
const polygon = new AMap.Polygon({ ...options, path: props.polygonPath });
map.add(polygon);
return () => { map.remove(polygon); } // 清理多边形
}
}, [map, props.polygonPath]);
return null; // 子组件无需渲染任何内容
};
这里也添加了useEffect的清理函数，在组件卸载或props更新时移除多边形，避免地图上残留多边形。 并且添加了if判断，确保map实例已初始化后再进行操作。
通过以上方法，确保地图实例不会被重复创建，从而保证地图视图能够正确更新。useMemo的应用提升了性能。 记住在组件卸载时清理地图实例和多边形，防止内存泄漏。
