React使用Leaflet加载本地定位时出现无限重渲染报错如何解决？

1. 无限重渲染问题原因 #

你把定位逻辑直接写在了组件的根作用域下，React组件每次渲染都会执行这段逻辑，逻辑内部调用setStatus/setLat/setLng等状态更新方法，状态更新又会触发组件重新渲染，就此陷入无限循环，触发重渲染次数超限报错。

修复方案：将定位逻辑包裹在useEffect钩子中，设置空依赖数组，保证仅在组件首次挂载时执行一次。

2. 地图中心点不生效问题原因 #

react-leaflet的MapContainer组件的center属性仅在组件初始化时生效，后续更新center的值不会主动触发地图视口变动，属于组件的设计规则。

修复方案：封装一个子组件，在子组件中通过useLeaflet钩子获取地图实例，监听坐标变化调用panTo方法主动更新地图视口；同时坐标未获取到之前不要渲染地图组件，避免传空值报错。

修复后完整代码 #

import { useState, useEffect } from 'react';
import { MapContainer, TileLayer, Marker, Popup, useLeaflet } from 'react-leaflet'

// 封装动态更新中心点的子组件
function ChangeMapCenter({ center }) {
  const map = useLeaflet().map;
  useEffect(() => {
    if (center[0] && center[1]) {
      map.panTo(center); // 坐标更新后主动跳转地图视口
    }
  }, [center, map])
  return null;
}

function HomePage(){
  const [lat, setLat] = useState(null);
  const [lng, setLng] = useState(null);
  const [status, setStatus] = useState(null);

  useEffect(() => {
    if (!navigator.geolocation) {
      setStatus('当前浏览器不支持定位功能');
    } else {
      setStatus('正在获取定位...');
      navigator.geolocation.getCurrentPosition((position) => {
        setStatus(null);
        setLat(position.coords.latitude);
        setLng(position.coords.longitude);
      }, () => {
        setStatus('无法获取你的位置信息');
      });
    }
  }, []) // 空依赖保证仅执行一次

  const position = [lat, lng]

  // 存在状态提示时优先渲染提示
  if (status) return <div>{status}</div>
  // 坐标为空时不渲染地图避免报错
  if (!lat || !lng) return null

  return(
    <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
      <ChangeMapCenter center={position} />
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>
          一个美观的CSS3弹窗 <br /> 可自由定制
        </Popup>
      </Marker>
    </MapContainer> 
  )
};
export default HomePage

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