反应位置返回未定义答案

【问题标题】：React Location returns undefined反应位置返回未定义
【发布时间】：2021-03-29 14:59:30
【问题描述】：

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

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

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

【问题讨论】：

这能回答你的问题吗？ useState set method not reflecting change immediately
你传递的函数：(position) => { ... } 在你的 console.log()s 之后运行。确定位置需要一些时间，并且浏览器不应该在等待期间挂起，这就是为什么你必须首先传递一个回调函数。设置状态也是异步的，所以即使没有获取到位置，你仍然会得到undefined。

标签： javascript reactjs geolocation

【解决方案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
}

【讨论】：

我尝试了两种方法，但仍然未定义

【解决方案2】：

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

【讨论】：