Estoy tratando de crear una aplicación en la que pueda alternar los efectos haciendo clic en los elementos de navegación.
En los elementos de navegación, tengo un detector de eventos que cambia de estado
const [marker, setMarker] = useState(false); onClick={() => setMarker(!marker)}La idea es que cuando se establece en verdadero, puede hacer clic en el mapa para establecer un punto de ruta. Y cuando es falso, hacer clic tiene el comportamiento predeterminado.
Intenté usar una declaración if como esta
if (marker) { map.current.on('click', (e) => { new mapboxgl.Marker().setLngLat(e.lngLat).addTo(map.current); // Create a new marker. }); }Ya sea que el estado sea verdadero o falso, aún puede colocar un punto de referencia después de cambiarlo por primera vez.
¿Puede alguien decirme lo que me estoy perdiendo aquí? Sé que es algo estúpido.
¡Enfrenté el mismo problema cuando comencé a usar React Hooks! ¡No se preocupe, eso se debe a que no tiene código para eliminar el evento de click agregado para el map Ref! ¡Entonces solo necesita limpiar el evento de click para el objeto del mapa!
useEffect(() => { function clickHandler(e) { new mapboxgl.Marker().setLngLat(e.lngLat).addTo(map.current); // Create a new marker. } if (marker) { map.current.on('click', (e) => { clickHandler(e) }); } return () => { map.current.removeEventListener('click', clickHandler) } }, [marker]);Por favor intente de esta manera... Buena suerte...