React中为ArcGIS MapView添加点击事件无响应问题求助

核心问题排查与修复 #

1. 未等待MapView加载完成就绑定事件 #

ArcGIS的MapView需要完成初始化（通过view.when()）后，绑定的事件才能正常触发。原代码直接在view状态更新后绑定事件，可能此时view还未完全就绪，导致事件无法触发。

修改绑定事件的useEffect：

useEffect(() => {
  if (!view) return;
  
  const setupHandler = async () => {
    // 等待MapView加载完成
    await view.when();
    const clickHandle = view.on('click', handleClick);
    return () => clickHandle.remove();
  };

  const cleanupPromise = setupHandler();
  return () => {
    cleanupPromise.then(cleanup => cleanup());
  };
}, [view, handleClick]); // 添加handleClick为依赖，确保绑定最新的事件处理函数

2. 事件处理函数的依赖缺失 #

原绑定事件的useEffect未将handleClick纳入依赖，若handleClick因view更新重新生成，旧的事件处理函数仍会被使用，导致逻辑失效。上面的代码已补全依赖。

同时优化handleClick的类型定义与逻辑，避免无效检测：

import { MapViewClickEvent } from "@arcgis/core/views/MapView";

const handleClick = useCallback((e: MapViewClickEvent) => {
  if (!view) return;
  view.hitTest(e)
    .then(res => {
      // 筛选属于图层的要素，排除标注等非目标元素
      const graphicResult = res.results.find(result => 
        result.type === "graphic" && result.graphic.layer
      );
      if (graphicResult) {
        setSelected(graphicResult.graphic.attributes);
      } else {
        // 点击空白处清空选中状态
        setSelected(undefined);
      }
    });
}, [view]);

3. MapView销毁逻辑失效 #

原初始化useEffect的清理函数中，view是初始的undefined（setState是异步操作），无法正确销毁MapView。改用ref保存实例：

const elementRef = useRef(null);
const [view, setView] = useState<MapView>();
const viewRef = useRef<MapView>(); // 新增ref保存view实例

// ...

useEffect(() => {
  const loadMap = async () => {
    const { init } = await import('./Map');
    const mapView = init(elementRef.current);
    setView(mapView);
    viewRef.current = mapView; // 同步更新ref
  };
  loadMap();
  
  return () => {
    // 使用ref中的实例销毁
    if (viewRef.current) {
      viewRef.current.destroy();
      viewRef.current = null;
    }
  };
}, []);

4. 图层交互性检查 #

确保目标图层开启交互（默认interactive: true），若设置为false，hitTest无法检测到要素：

// 示例图层配置
const layer = new FeatureLayer({
  url: "你的图层地址",
  interactive: true // 确保开启交互
});

完整修复后的代码 #

import { useRef, useState, useEffect, useCallback } from 'react';
import { MapView, Feature } from '@arcgis/core/views/MapView';
import { MapViewClickEvent } from '@arcgis/core/views/MapView';

export const MapComponent = () => {
    const elementRef = useRef(null);
    const [view, setView] = useState<MapView>();
    const viewRef = useRef<MapView>();
    const [selected, setSelected] = useState<Feature>();


    const handleClick = useCallback((e: MapViewClickEvent) => {
        if (!view) return;
        view.hitTest(e)
            .then(res => {
                const graphicResult = res.results.find(result => 
                    result.type === 'graphic' && result.graphic.layer
                );
                if (graphicResult) {
                    setSelected(graphicResult.graphic.attributes as Feature);
                } else {
                    setSelected(undefined);
                }
            })
    }, [view]);

    useEffect(() => {
        if (!view) return;
        const setupHandler = async () => {
            await view.when();
            const clickHandle = view.on('click', handleClick);
            return () => clickHandle.remove();
        };

        const cleanupPromise = setupHandler();
        return () => {
            cleanupPromise.then(cleanup => cleanup());
        };
    }, [view, handleClick]);

    useEffect(() => {
        const loadMap = async () => {
            const { init } = await import('./Map');
            const mapView = init(elementRef.current);
            setView(mapView);
            viewRef.current = mapView;
        }
        loadMap();
        return () => {
            if (viewRef.current) {
                viewRef.current.destroy();
                viewRef.current = null;
            }
        };
    }, []);

    return (
        <>
            <div
                ref={elementRef}
                style={{ height: '500px', width: '800px' }}
            >
            </div>
            <pre>{JSON.stringify(selected, null, 2)}</pre>
        </>
    )
}

内容的提问来源于stack exchange，提问作者Luis Carlos Cruz Castillo