React集成leaflet.js渲染地图报Cannot read properties of undefined错误如何解决

• Leaflet 库采用默认导出规则，你使用命名导入{L}的写法无法拿到正确的全局实例对象，导致L为undefined，调用L.map就会触发读取undefined属性的报错。
• 你在组件顶层直接执行地图初始化逻辑，此时组件返回的<div id="map">节点还没有渲染到DOM树上，就算导入方式正确也会触发找不到目标节点的错误。
• 原代码中组件名myApp为小写，不符合React组件首字母必须大写的规范，也可能引发渲染异常。

1. 修正导入逻辑，同时引入Leaflet必备的样式文件避免地图样式错乱：

// 替换原来的 import {L} from 'leaflet'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

2. 使用useEffect钩子把地图初始化逻辑放在DOM渲染完成后执行，同时添加实例清理逻辑避免内存泄漏，完整修正后的代码如下：

import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import { useEffect, useRef } from 'react'

const MyApp = () => {
  // 存储地图实例，方便后续操作
  const mapRef = useRef(null)

  useEffect(() => {
    // 避免重复初始化
    if (mapRef.current) return

    const map = L.map("map").setView([45, 1], 4);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    L.control.scale().addTo(map);
    L.marker([45, 1], {
      icon: new L.Icon({
        // 可替换为本地存储的图标资源路径
        iconUrl: 'marker-icon.png'
      })
    }).addTo(map);

    mapRef.current = map

    // 组件卸载时清理地图实例
    return () => {
      map.remove()
      mapRef.current = null
    }
  }, [])

  return (
    <div id="map" style={{height: '100vh'}}></div>
  )
}

export default MyApp

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