React Hooks集成Google Maps更新标记闪烁、存在双标记问题咨询

1. 双标记异常修复 #

代码中InfoWindow组件后多写了一个空的<Marker />标签，无任何位置和属性配置，直接删除这一行即可消除多余标记。

2. 标记更新闪烁修复 #

闪烁是组件重渲染时地图实例被重复创建导致的，和Hooks本身特性无关，按以下步骤修改即可解决：

• 将AsyncMap的定义移到组件外部：当前你把withScriptjs和withGoogleMap包裹的组件定义写在了LocationSearchModal组件内部，每次状态更新触发组件重渲染时，都会生成全新的AsyncMap组件实例，导致整个地图重新加载。将这部分代码移到组件定义外，全局只初始化一次AsyncMap即可。
• 修改GoogleMap的属性绑定：你现在用的defaultZoom、defaultCenter是仅初始化生效的属性，更新状态时不会响应修改，会触发地图重初始化。将两个属性替换为zoom和center，绑定对应状态值即可。

其他可优化的问题 #

你当前的onChange函数直接 setState 覆盖整个状态对象，会丢失其他状态字段，修改为：

const onChange = (event) => {
  setState(prev => ({ ...prev, [event.target.name]: event.target.value }));
};

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