反应位置返回未定义

Posted 2023-02-23

【中文标题】反应位置返回未定义

【英文标题】：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。

【参考方案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】：

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