React Leaflet Map状态更新后地图未重新渲染如何解决？

问题根因 #

react-leaflet 的 MapContainer 组件的 center 属性仅作为初始化地图时的中心点参数，后续 state 中 lat/lng 更新时，MapContainer 不会监听这个属性的变化自动调整地图位置，只有 Marker 会响应位置更新，这是官方设计的逻辑，不是BUG。

解决方案 #

方案1：使用官方提供的 useMap 钩子控制地图移动（推荐） #

该方案不会重新渲染整个地图，性能更好。
首先修改import引入useMap：

import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';

然后单独封装地图控制子组件，在子组件内获取地图实例，监听坐标变化后调用内置方法移动中心点：

// 放在App组件外即可
function MapController({ lat, lng }) {
  const map = useMap();
  useEffect(() => {
    // 坐标更新时平滑移动到新中心点
    map.panTo([lat, lng]);
  }, [lat, lng, map]);
  return null;
}

最后把该组件放到MapContainer内部作为子组件：

<MapContainer center={[lat, lng ]} zoom={18} scrollWheelZoom={true} className='map-container'>
  {/* 新增这行，传入当前坐标 */}
  <MapController lat={lat} lng={lng} />
  <TileLayer
    // 原有配置保持不变
  />
  <Marker position={[lat, lng]}>
    {/* 原有配置保持不变 */}
  </Marker>
</MapContainer>

方案2：给MapContainer加key属性（简单快捷） #

如果项目对性能要求不高，直接给MapContainer加key属性绑定当前坐标，坐标变化时React会自动销毁旧地图实例重新渲染，自动对准新中心点：

<MapContainer 
  key={`${lat}-${lng}`} // 新增这行
  center={[lat, lng ]} 
  zoom={18} 
  scrollWheelZoom={true} 
  className='map-container'
>

其他需要修复的代码问题 #

1. loading状态逻辑错误：当前setLoad(false)放在fetch请求外层，会导致请求刚发起就关闭loading，正确写法是放到请求回调里：

function getData(event) {
  event.preventDefault();
  setLoad(true);
  fetch(`http://api.ipstack.com/${ip}?access_key=${process.env.REACT_APP_IPSTACK_ACCESS_TOKEN}`)
    .then(response => response.json())
    .then(data => {
      setData(data);
      setLat(data.latitude);
      setLng(data.longitude);
      setLoad(false); // 移到请求成功回调末尾
    })
    .catch(err => {
      console.error(err);
      setLoad(false); // 异常场景也要关闭loading
    })
}

2. 现有代码中空的useEffect没有任何作用，可以直接删除。

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