时间戳

首页 > 解决方案 > useState 的值始终是地图事件回调中的初始值

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

问题描述

我@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);.

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

  1. 在handleMapLoad开始时被调用。它设置以下状态：setMapViewReference(view);whileview是我直接从 esri 库中获取的属性。
  2. 之后，我点击地图并执行回调
  3. 如果我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({...});
};

标签： reactjsreact-hooksarcgis-js-api

解决方案

是的，我曾经对 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>

推荐阅读