反应传单太多刷新映射与上下文更新值

Question

我在显示当前标记的另一个组件中过滤了一张地图和一个列表。当我执行 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>

Answer 1

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

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

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

在我的 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 */
        }
    }, [])

}

反应传单太多刷新映射与上下文更新值

React leaflet too much refresh map with context update value

javascript

leaflet

reactjs

react-leaflet

next.js