React Location 返回未定义

Question

我正在尝试获取天气应用程序的用户位置，但日志返回未定义

  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]);

我获得了日志，确认浏览器已授予该位置，但随后我的纬度和经度未定义

Answer 1

我相信这是一个简单的异步问题。

navigator.geolocation.getCurrentPosition

是异步的，不会立即调用给定的函数。

我相信，如果您在回调中移动

console.log

，那么状态应该具有正确的值。

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

还要记住，React 状态更新可以是异步的。测试

lat

和

long

变量的不同值的更好方法是在渲染函数中

log

它们。

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

发现错误是操作系统阻止了浏览器的位置服务

Answer 3

将字符串放入您的状态；

const [lat, setLat] = useState(""); const [long, setLong] = useState("");