Question

我正在使用@esri/react-arcgis来显示基本地图。目的是发送点击请求，以查找点击区域的一些数据。

这是我的地图

<Map
    onLoad={handleMapLoad}
    onFail={handleMapLoadFail}
    onClick={handleMapClick}
    ... // bunch of other properties (basemap, styles etc)
></Map>

我的问题是，当onClick触发（并且调用handleMapClick）时，组件useState中的值始终是初始值。定义如下：const [mapViewReference, setMapViewReference] = useState(null);。

它不应该总是为null，因为：

handleMapLoad一开始就被调用。它设置以下状态：setMapViewReference(view);，而view是我直接从esri库获得的属性。
之后，我点击地图并执行回调
如果我从虚拟按钮调用handleMapClick，则状态/值将正确。

这是useCallback或其他钩子可以处理的吗？我不确定esri库是否有问题...

这正好在我的return（功能组件）之前：

const handleMapClick = async event => {
    console.log(mapViewReference); // This is always null, unless I call the function manually from a dummy button
    const point = mapViewReference.toMap(event);
    const response = await featureLayerReference.queryFeatures({...});
};

Answer 1

是的，我曾经在react-map-gl上遇到过同样的问题。我想这是在组件安装时记录onClick函数的情况，当地图在任何状态更改时都不会更新它。我要做的是在地图点击事件触发时触发setState，并在事件状态更改时在useEffect中执行所有操作：

const [event,setEvent]= useState()

useEffect(()=>{
if(event){
   console.log(mapViewReference); // This is always null, unless I call the function 
     manually from a dummy button
    const point = mapViewReference.toMap(event);
    const response = await featureLayerReference.queryFeatures({...});
}
},[event])

，对于Map组件：

<Map
    onLoad={handleMapLoad}
    onFail={handleMapLoadFail}
    onClick={setEvent}
    ... // bunch of other properties (basemap, styles etc)
></Map>

useState的值始终是地图事件回调中的初始值

1 个答案: