react传单onMoveEnd原因错误：“超出最大更新深度”

Question

我有以下代码，每次地图移动时都会执行状态更新。

 function updateMap() {
    const b = mapRef.current.leafletElement.getBounds()
    const zoomm = mapRef.current.leafletElement.getZoom()
    const initBound = [b.getSouthWest().lng, b.getSouthWest().lat, b.getNorthEast().lng, b.getNorthEast().lat]

    setZoom(zoomm)
    setBound(initBound)
  }

波纹管是地图组件，我也尝试过onMoveEnd事件

<Map onViewportChanged={updateMap}/>

它在几次移动中都可以正常工作，但有时会更好，特别是如果我继续移动地图，它会冻结并且出现Maximum update depth exceeded错误。

有人可以解释一下原因吗，这是对Leaflet作出反应的错误，还是我做错了什么？

Answer 1

之所以会出现此错误，是因为您在每次移动时都在更新状态，并且在作出反应时，您可以仅在有限的时间内更新状态，以防止发生无限循环。

解决问题的一种方法是对updateMap方法进行去抖动。

选中此link以查看执行反跳的其他方法。

我希望这会有所帮助！