反应位置返回未定义

Question

I'm trying to get the user location for a weather app but the log return undefined

 const [lat, setLat] = useState(); const [long, setLong] = useState(); useEffect(() => { const handleLocation = () => { navigator.geolocation.getCurrentPosition((position) => { setLat(position.coords.latitude); setLong(position.coords.longitude); }); console.log(lat); console.log(long); }; if (navigator.geolocation) { navigator.permissions.query({ name: 'geolocation' }).then(function (result) { if (result.state === 'granted') { console.log(result.state); handleLocation(); } else if (result.state === 'prompt') { console.log('prompt'); } else if (result.state === 'denied') { console.log('Denied'); } }); } }, [lat, long]);

I get the log granted confirming that the browser granted the location but then I get undefined for the lat and long

Answer 1

I believe this is a simple async problem. The navigator.geolocation.getCurrentPosition is asynchronous and will not call the given function straight away.

I believe if you move your console.log inside the callback, then the state should have the right value.

const handleLocation = () => {
  navigator.geolocation.getCurrentPosition((position) => {
    setLat(position.coords.latitude);
    setLong(position.coords.longitude);
    console.log(lat);
    console.log(long);
  });
};

Also bear in mind that React state updates can be asynchronous. A better way to test the different values of the lat and long variables, would be to log them in the render function.

function Component() {
    const [lat, setLat] = useState()

    useEffect( /* your useEffect callback here */);

    console.log(lat); // you will see all the values of lat through time now
}

Answer 2

Found the error being the OS blocking the location service from the browser