console.log вызывается трижды, когда я кликаю на Marker и ещё четыре раза, когда закрываю всплывающее окно. Кто-нибудь может объяснить, почему это происходит?
Marker
const LocationMarker = ({elem, setIsVpnChanged, isVpnChanged, handleVpnStatus}) => {
const map=useMapEvents({
popupopen(){
// setIsVpnChanged((prev)=>({...prev, isChanged:true}))
console.log('is opened')
},
popupclose(){
setIsVpnChanged((prev)=>({...prev, isChanged:false}))
console.log('is closed')
}
})
return <Marker position={elem.position} className="marker__down" opacity={(elem.health?1:0.5)} >
<Popup>
...Some html...
</Popup>
</Marker>
}
и Маркер просто рендерится на карте по количеству элементов в массиве данных
<MapContainer center={vpns[0].position && [0, 0]} zoom={2} id="map" className='map'>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{vpns.map((elem) =>
<LocationMarker elem={elem} setIsVpnChanged={setIsVpnChanged} isVpnChanged={isVpnChanged} handleVpnStatus={handleVpnStatus} key={uuidv4()}/>
)}
</MapContainer>
По умолчанию в массиве входных данных находятся три элемента, соответственно, рендерятся три маркера. Может такое быть, что событие popupopen происходит не для того маркера. на который кликнули, а для всех?