gooseNjuice
@gooseNjuice
JavaScript Fullstack

Почему Popup открывается трижды за один клик?

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='&copy; <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 происходит не для того маркера. на который кликнули, а для всех?
  • Вопрос задан
  • 64 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы