react-leaflet地图无法显示且无报错，求技术解决方案

问题描述 #

我花了5小时解决了仪表盘的显示问题，现在代码能正常运行，但react-leaflet的地图还是无法显示，控制台也没有输出任何报错信息。我已经严格按照react-leaflet官方教程操作，问题依然存在，相关代码如下：

import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";

export default function Dashboard({ setUser, setAuthState, user }) {
  useEffect(() => {
    console.log(user);
    getUserData(user);
  }, []);

  const [issData, setIssData] = useState(null);

  useEffect(() => {
    getIssData().then((data) => {
      setIssData(data);
    });
  }, [issData]);

  return (
    <div className="dashboard">
      <Nav />
      <div className="main">
        <MenuPopupState
          setUser={setUser}
          setAuthState={setAuthState}
          user={user}
        />
      </div>
      <Fire user={user} />
      <div>
        {issData ? (
          <div>
            <h1>Current Position of ISS</h1>
            <p>Latitude: {issData.iss_position.latitude}</p>
            <p>Longitude: {issData.iss_position.longitude}</p>
          </div>
        ) : (
          <p>Loading...</p>
        )}
      </div>
      <div>
        <MapContainer
          center={[51.505, -0.09]}
          zoom={13}
          scrollWheelZoom={false}
          height="100px"
        >
          <TileLayer
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <Marker position={[51.505, -0.09]}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </MapContainer>
      </div>
    </div>
  );
}

解决方法 #

• 调整地图容器高度
  当前MapContainer仅设置了height="100px"，高度过小可能导致视觉上"不显示"，建议改用更大的固定值或相对单位，同时通过style属性设置更稳妥：

  <MapContainer
    center={[51.505, -0.09]}
    zoom={13}
    scrollWheelZoom={false}
    style={{ height: "400px", width: "100%" }}
  >
  

• 修复无限循环的副作用
  获取ISS数据的useEffect依赖项设置为issData，会导致每次更新issData后重新触发请求，形成无限循环，可能间接影响地图渲染。将依赖改为空数组，确保只执行一次：

  useEffect(() => {
    getIssData().then((data) => {
      setIssData(data);
    });
  }, []);
  

• 处理Leaflet图标资源路径问题
  部分环境下Leaflet默认Marker图标会因路径问题加载失败（虽不直接导致地图不显示，但可能引发隐性渲染问题），可手动配置图标路径：

  import L from 'leaflet';
  // 重置默认图标路径
  delete L.Icon.Default.prototype._getIconUrl;
  L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
  });
  

  将这段代码添加到react-leaflet组件导入之后。

• 检查父容器布局
  确认包裹MapContainer的外层div没有设置display: none、overflow: hidden等会隐藏地图的样式，可临时给外层div添加边框排查：

  <div style={{ border: "1px solid red" }}>
    <MapContainer ... />
  </div>
  

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