React Native获取用户位置函数日志正常但返回值未更新求助

我编写了以下用于获取用户当前位置并更新预定义location属性的函数：

export const getCurrentLocation = () => {
  const location = {
    userLat: '5',
    userLng: ''
  }

  navigator.geolocation.getCurrentPosition(
    (position) => {
      //getting the Longitude from the location json
      const currentLongitude = JSON.stringify(position.coords.longitude);

      //getting the Latitude from the location json
      const currentLatitude = JSON.stringify(position.coords.latitude);

      location.userLat = currentLatitude;

      console.log('lat: ', location.userLat);
    },
    (error) => {
      console.warn(error);
    },
    {
      enableHighAccuracy: false,
      timeout: 30000,
      maximumAge: 1000
    },
  );
  return (
    location
  );
}

将location.userLat赋值为currentLatitude后，控制台日志显示正确，但函数执行完毕后返回的userLat仍为初始值'5'。尝试使用useState钩子更新值时，出现了invalid hook calls错误，希望得到让返回值正确反映currentLatitude的建议。

1. 核心问题：异步逻辑导致返回旧值 #

navigator.geolocation.getCurrentPosition是异步API，你的函数会先执行return location语句，之后异步回调才会修改location.userLat。所以返回的始终是初始的location对象，而非更新后的值。

2. 用Promise封装异步逻辑 #

将函数改为返回Promise，等待地理位置获取完成后再返回更新后的对象：

export const getCurrentLocation = () => {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const currentLongitude = JSON.stringify(position.coords.longitude);
        const currentLatitude = JSON.stringify(position.coords.latitude);
        
        resolve({
          userLat: currentLatitude,
          userLng: currentLongitude
        });
      },
      (error) => {
        console.warn(error);
        reject(error);
      },
      {
        enableHighAccuracy: false,
        timeout: 30000,
        maximumAge: 1000
      },
    );
  });
}

使用时需要用async/await或.then()处理：

// 示例：在组件中调用
async function fetchLocation() {
  try {
    const location = await getCurrentLocation();
    console.log('更新后的位置:', location);
    // 这里可以用useState更新组件状态
  } catch (err) {
    console.error('获取位置失败:', err);
  }
}

3. 解决useState报错问题 #

useState只能在React组件的顶层或自定义Hook的顶层调用，不能在普通函数、异步回调或循环中使用。如果要在React中管理位置状态，有两种正确方式：

方式一：封装为自定义Hook

import { useState, useEffect } from 'react';

export const useCurrentLocation = () => {
  const [location, setLocation] = useState({
    userLat: '5',
    userLng: '',
    isLoading: true,
    error: null
  });

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const currentLongitude = JSON.stringify(position.coords.longitude);
        const currentLatitude = JSON.stringify(position.coords.latitude);
        
        setLocation({
          userLat: currentLatitude,
          userLng: currentLongitude,
          isLoading: false,
          error: null
        });
      },
      (error) => {
        console.warn(error);
        setLocation(prev => ({
          ...prev,
          isLoading: false,
          error: error.message
        }));
      },
      {
        enableHighAccuracy: false,
        timeout: 30000,
        maximumAge: 1000
      },
    );
  }, []);

  return location;
}

在组件中直接使用：

function LocationComponent() {
  const { userLat, userLng, isLoading, error } = useCurrentLocation();

  if (isLoading) return <div>加载位置中...</div>;
  if (error) return <div>获取位置失败: {error}</div>;

  return <div>当前位置：纬度{userLat}，经度{userLng}</div>;
}

方式二：在组件中结合useEffect和useState调用Promise版函数

import { useState, useEffect } from 'react';
import { getCurrentLocation } from './your-file-path';

function LocationComponent() {
  const [location, setLocation] = useState({
    userLat: '5',
    userLng: ''
  });
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchLocation = async () => {
      try {
        const newLocation = await getCurrentLocation();
        setLocation(newLocation);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchLocation();
  }, []);

  if (isLoading) return <div>加载位置中...</div>;
  if (error) return <div>获取位置失败: {error}</div>;

  return <div>当前位置：纬度{location.userLat}，经度{location.userLng}</div>;
}

内容的提问来源于stack exchange，提问作者Nana Kofi Mantey