使用react-google-maps-api调用map.setCenter()报空值错误求助

核心问题原因 #

报错TypeError: Cannot read properties of null (reading 'setCenter')是因为useEffect执行时，地图实例map可能还未初始化完成（值为null），或者地图已经被卸载。

具体修复步骤 #

1. 增加map非空判断
   在调用map.setCenter()前先检查map是否存在，避免空值调用：

useEffect(() => {
  // 先获取目标国家数据，避免重复查找
  const country = hotels.find(h => h.country === choice);
  if (!country) return; // 找不到对应国家时直接退出

  // 确保map实例存在再调用setCenter
  if (map) {
    map.setCenter(country.center);
  }

  // 处理筛选逻辑
  let filteredFlights;
  if (budgetValue == null) {
    filteredFlights = country.hotels;
  } else {
    filteredFlights = country.hotels.filter(f => f.price * personCount <= budgetValue);
  }
  setMarkers(filteredFlights);
}, [budgetValue, choice, hotels, personCount, map]); // 补充所有用到的依赖项

2. 完善useEffect依赖数组
   把choice、hotels、personCount、map都加入依赖数组，确保这些变量变化时useEffect能正确触发，同时避免闭包导致的旧值问题。

3. 清理冗余的onLoad绑定
   你当前的代码里，Marker和InfoWindowF都绑定了onLoad={onLoad}，但这个onLoad是用来设置地图实例的，只需要在<GoogleMap>组件上绑定即可，其他组件的onLoad可以移除，避免不必要的状态更新：

<Marker
  position={{ lat: hotel.lat, lng: hotel.lng }}
  onMouseOver={() => setShowMarker(i)}
  key={i}
/>

4. 可选：延迟执行直到map初始化完成
   如果希望确保map一定存在后再执行中心设置，可以单独加一个监听map状态的useEffect：

useEffect(() => {
  if (!map) return;
  const country = hotels.find(h => h.country === choice);
  if (country) {
    map.setCenter(country.center);
  }
}, [map, choice, hotels]);

这个effect会在map实例初始化完成（从null变为有效实例），或者choice、hotels变化时触发，确保地图中心能正确更新。

额外注意事项 #

• 确保tempCenter初始值是有效的坐标，避免地图加载时出现异常
• 当组件卸载时，onUnmount会把map设为null，此时后续的useEffect如果触发，也会因为map为null而跳过执行，避免报错

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