0
118
ViewsCuando bloqueo el sitio, todavía puedo ver la geolocalización del navegador usando Reactjs
Cuando permito que el navegador obtenga la geolocalización al hacer clic en el botón, puedo ver la latitud y la longitud. Pero cuando bloqueo el sitio para acceder a la ubicación, aparece "No se puede recuperar su ubicación" y también la latitud y la longitud ... Aquí, cuando bloqueo el sitio, solo debería recibir el mensaje "No se puede recuperar su ubicación" y Latitud y la longitud no deberían mostrarse... Encuentre también la captura de pantalla 
Aquí está mi código
const GeolocationButton = () => { const [lat, setLat] = useState(null); const [lng, setLng] = useState(null); const [status, setStatus] = useState(null); const getLocation = () => { if (!navigator.geolocation) { setStatus('Geolocation is not supported by your browser'); } else { setStatus('Please allow brower to access your Location'); navigator.geolocation.getCurrentPosition((position) => { setStatus(null); setLat(position.coords.latitude); setLng(position.coords.longitude); }, () => { setStatus('Unable to retrieve your location'); }); } } return ( <div className="App"> <button onClick={getLocation}>Get Location</button> <h1>Coordinates</h1> <p>{status}</p> {lat && <p>Latitude: {lat}</p>} {lng && <p>Longitude: {lng}</p>} </div> ); } export default GeolocationButton1 answers
Answer question0
lat y lng son variables de estado, y el estado es, bueno, persistente. En consecuencia, cuando estableces lat y lng , conservan esos valores, incluso si luego bloqueas el acceso a los datos de ubicación.
Hay varias formas de resolver:
Dado que
status,latylngson todos interdependientes, utilice una sola variable de estado para almacenar los tres. Este enfoque es el que mejor se da cuenta de la relación dependiente entre las variables.const GeolocationButton = () => { // could also initialize location to `{}` const [location, setLocation] = useState({status:null,lat:null,lng:null}); const getLocation = () => { if (! navigator.geolocation) { // don't spread previous state into new state, and // no need to explicitly set location.lat & .lng setLocation({ status: 'Geolocation is not supported by your browser', }); } else { …Al configurar el
status, configure tambiénlngylat. Esto no implementa explícitamente la interdependencia entre variables, por lo que requiere más disciplina por parte del programador.if (! navigator.geolocation) { setStatus('Geolocation is not supported by your browser'); setLat(null); setLng(null); } else { // note: there's a typo in "browser" in the question sample setStatus('Please allow browser to access your Location'); setLat(null); setLng(null); …Al obtener la ubicación, inicialice
latylngennull:const getLocation = () => { setLat(null); setLng(null);Al mostrar
latylng, verifique que elstatusno esté establecido (también debe verificarstatusantes de mostrarlo):{status && <p>{status}</p>} {!status && lat && <p>Latitude: {lat}</p>}