React中如何在useEffect外部访问Leaflet的map地图实例对象

• 报错mymap is not defined本质是变量作用域问题：你在useEffect回调内部声明的mymap仅属于该回调的局部作用域，组件内的addGrid等外部函数无法访问到这个变量。
• 你尝试用useState存储不生效的原因是：Leaflet地图实例是不需要触发组件重渲染的可变对象，useState主要用来存需要响应式更新、触发重渲染的状态，直接存实例如果没有正确处理更新逻辑确实会出现取值异常的问题。

推荐使用useRef存储地图实例，useRef的current属性可以存储任意可变值，且修改时不会触发组件重渲染，非常适合存储第三方库的实例对象。修改后的完整代码如下：

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

import './css/grid.css'

export const Grid = ({mapID}) => {
    const centerCoor = // 这里填写你自己的中心坐标值
    // 用ref存储地图实例和图层组
    const mapRef = useRef(null)
    const layerGroupRef = useRef(L.layerGroup())
    // 用useState管理按钮激活状态，避免直接操作DOM
    const [btnActive, setBtnActive] = useState(false)

    function addGrid(){
        setBtnActive(prev => !prev)
        // 先判断地图实例是否已经初始化，避免报错
        if (!btnActive && mapRef.current) {
            mapRef.current.on('click', (e)=>{
                // 这里写点击地图的逻辑
            })
        }
    }

    useEffect(()=>{
        const mymap = L.map(mapID, {
            center: centerCoor,
            zoom:18
        });
        // 把初始化好的地图实例赋值给ref的current属性，全局可访问
        mapRef.current = mymap

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
            attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
            maxZoom: 18,
            id: 'mapbox/satellite-v9',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: // 这里填写你自己的accessToken
            }
        ).addTo(mymap);

        return () => {
            mymap.off()
            mymap.remove()
            // 组件卸载时清空ref
            mapRef.current = null
        }
    },[])


    return (
        <div>
            <button onClick={addGrid} className={btnActive ? "btn-active" : ""} id="btn-grid">ADD GRID</button>
            <div id={mapID}>
            </div>
        </div>
    )
}

• 去掉了直接用document.getElementById操作按钮DOM的逻辑，改用React的useState管理激活状态，更符合React的单向数据流规范，避免DOM操作和状态不同步的问题。
• 所有操作地图实例的地方都加了非空判断，避免地图还没初始化完成就点击按钮触发报错。

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