使用上下文更新值反应传单太多刷新地图

如何解决使用上下文更新值反应传单太多刷新地图

我有一个地图和一个列表，在另一个组件中过滤，显示存在的标记。当我执行 map.on ('moveend') 以显示标记列表时，我遇到了一个令人耳目一新的问题。

我有一个包含 2 个数组的上下文。一个过滤数组和一个包含我的标记的数组。当我执行更新过滤列表的函数时，我刷新了数百个数据并且页面崩溃了。

在我创建地图的组件中，它只检索默认的标记列表。我在另一个组件中显示我的过滤标记。

我不想恢复我的地图，因为里面的数据没有改变，即使地图移动我的标记列表仍然存在我只想更新我的上下文数组以在另一个组件中显示列表

filteredListComp 将数据显示在其他组件中的数组

map.on('moveend',function(e){
  if(e.target.getBounds().contains(obj)) {
     filtered.push(m)
     setListCompContext(prevState => ({...prevState,filteredListComp: filtered }))
  } 
})

我在根项目中的初始上下文：

const [listDefaultCompContext,setListDefaultCompContext] = useState({
   defaultListComp: [],filteredListComp: []
})

<ContextApp.Provider value={[listDefaultCompContext,setListDefaultCompContext]}>
    <DefaultLayout>
        <Component {...pageProps} />
    </DefaultLayout>
</ContextApp.Provider>

解决方法

问题来自 next.js 的动态导入，它装载了我的组件。当我移动地图时，组件总是被挂载。

我做的第一件事是在我的页面导入级别创建一个匿名函数。

在我的页面组件中，我有一个 useEffect 对我的组件执行 require () 以避免未定义窗口。

在我的 mapLeaflet 组件中，我有一个 useEffect 来处理 map.on ('moveend') 事件，以避免刷新过多

Component of my page at the level of import:
import xxxx from 'xxxx';
...
let MapLeaflet = () => {
    return <Spin />
}
....
import xxxx from 'xxxx';

/***************/
Inside my functional component of my page

const myFunctionalComponent = () => {

     useEffect(() => {
        MapLeaflet = require('components/s/MapLeaflet').default

        return () => {
            /* Destroy */
        }
    },[])

}

/***************/
And in my leafletComponent inside my MapContainer

const MapLeaflet = (props) => {
   <MapContainer
   center={mapCenter}
   zoom={12}
   scrollWheelZoom={true}
   style={{ height: props.size,width: '100%',zIndex: '0' }}
   >

      <LMapContent />

   </MapContainer>
}

const LMapContent = () => {

    useEffect(() => {
        // Mount

        // Map events
        map.on('moveend',(ev) => {
          ...code
        })

        return () => {
            /* Destroy */
        }
    },[])

}