添加useImperativeHandle后无法从reactLeaflet解构MapContainer报错如何解决

问题原因 #

1. 代码执行顺序错误：你将reactLeaflet的解构逻辑放在了非加载判断逻辑之前，reactLeaflet初始值为null，首次渲染时还没等到异步加载react-leaflet完成，就直接对null执行解构操作，直接触发报错。你新增useImperativeHandle时调整了代码顺序，才把这个原本就存在的逻辑问题暴露了出来。
2. useImperativeHandle使用错误：你将内部组件HandleClickMap通过ref暴露给父组件的用法不符合规范，useImperativeHandle是用来暴露命令式调用方法的，不能用来传递React组件。同时你把同一个ref同时绑定到MapContainer和useImperativeHandle上，会导致MapContainer无法正确获取到ref实例。
3. 额外逻辑问题：HandleClickMap作为MapContainer的子组件，内部用到的useMapEvents只能在地图容器内部执行，父组件即使拿到这个组件也无法直接调用。

修复方案 #

第一步：调整代码执行顺序 #

把reactLeaflet为空时的返回逻辑移到解构操作之前，避免对null执行解构。

第二步：修正事件传递逻辑 #

如果只是要把地图点击后的坐标传递给父组件，直接通过props回调即可，不需要用useImperativeHandle。如果确实需要给父组件暴露操作地图的方法，单独定义方法后再通过useImperativeHandle暴露，同时单独用内部ref存储MapContainer实例。

修复后的参考代码 #

import { forwardRef, useState, useEffect, useImperativeHandle, useRef } from 'react';

const MyMap = (props, ref) => {
    const [reactLeaflet, setReactLeaflet] = useState(null);
    const [position, setPosition] = useState(null);
    // 单独用内部ref存储MapContainer实例，避免和forwardRef冲突
    const mapRef = useRef(null);

    useEffect(() => {
        const loadData = async () => {
            import('react-leaflet')
                .then(leaflet => setReactLeaflet(leaflet))
                .catch(error => noticeError(null, levels.error, error, "react-leaflet failed to load"));
        };
        loadData();
    }, []);

    // 把空判断移到最前面，没加载完成直接返回，不走后面的逻辑
    if (!reactLeaflet) {
        return <LeafletCss />;
    }

    // 现在reactLeaflet肯定有值，不会出现解构null的问题
    const {
        MapContainer,
        Marker,
        TileLayer,
        useMapEvents,
    } = reactLeaflet;

    const HandleClickMap = () => {
        const currMap = useMapEvents({ 
            click() {
                currMap.locate();
            },
            locationfound(e) {
                const pos = e.latlng;
                setPosition(pos);
                currMap.flyTo(pos, currMap.getZoom());
                // 直接通过props回调把坐标传给父组件，不需要用ref暴露
                props.onMapClick?.(pos);
            },
        });
        return position === null ? null : <Marker position={position} />;
    };

    // 如果确实需要给父组件暴露方法，在这里定义，不要暴露内部组件
    useImperativeHandle(ref, () => ({
        // 比如给父组件暴露一个手动触发定位的方法
        locate: () => {
            mapRef.current?.locate();
        },
        getCurrentPosition: () => position
    }));

    return <>
        <LeafletCss />
        <MapContainer
            center={{ lat: 0, lng: 0 }}
            zoom={13}
            ref={mapRef}
            scrollWheelZoom={false}
            className={style.mapContainer}
        >
            <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
            />
            <HandleClickMap />
        </MapContainer>
    </>;
};

export default forwardRef(MyMap);

父组件调用示例 #

// 父组件里使用
const Parent = () => {
    const mapRef = useRef(null);

    const handleMapClick = (pos) => {
        console.log('拿到点击的坐标', pos);
    };

    // 调用子组件暴露的方法
    const handleLocate = () => {
        mapRef.current?.locate();
    };

    return <div>
        <button onClick={handleLocate}>手动触发定位</button>
        <MyMap ref={mapRef} onMapClick={handleMapClick} />
    </div>
}

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