如何异步修改React状态？获取用户坐标后useState首次返回undefined问题

你遇到的问题核心是React的useState更新是异步的，且闭包会捕获当前作用域的状态值。

在你的代码里，虽然在success回调中调用了setGlobalPosition(position)，但这个操作不会立刻改变当前useEffect里的globalPosition变量——状态更新是异步批量处理的，只有组件重新渲染后，新状态才会生效。而getLocation.then()里的globalPosition，捕获的是useEffect首次执行时的初始值（也就是undefined），所以打印结果自然是undefined。

下面是几种可行的修复方案：

方案1：通过Promise返回位置数据，不依赖状态 #

直接在Promise中返回获取到的位置，这样then里就能拿到最新的位置信息，无需等待状态更新：

const [globalPosition, setGlobalPosition] = useState<any>(undefined);

useEffect(() => {
    const getLocation = new Promise<GeolocationPosition>((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(success, error, {
            enableHighAccuracy: true,
        });
        function success(position: GeolocationPosition) {
            setGlobalPosition(position);
            resolve(position); // 将位置作为Promise返回值
        }
        function error(err: GeolocationPositionError) {
            console.log(err);
            reject(err);
        }
    });
    getLocation.then((position) => {
        console.log(position); // 直接使用Promise返回的位置数据
    }).catch(err => console.error(err));
}, []);

方案2：用useEffect监听状态变化 #

如果后续逻辑必须依赖状态值，可以新增一个useEffect来监听globalPosition的更新：

const [globalPosition, setGlobalPosition] = useState<any>(undefined);

useEffect(() => {
    const getLocation = new Promise<void>((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(success, error, {
            enableHighAccuracy: true,
        });
        function success(position: any) {
            setGlobalPosition(position);
            resolve();
        }
        function error(err: any) {
            console.log(err);
            reject();
        }
    });
    getLocation.catch(err => console.error(err));
}, []);

// 监听globalPosition的变化，状态更新时执行后续逻辑
useEffect(() => {
    if (globalPosition) {
        console.log(globalPosition); // 这里能拿到最新的状态值
        // 其他依赖globalPosition的业务逻辑放在这里
    }
}, [globalPosition]); // 依赖项设为globalPosition，状态变化时触发

方案3：用useRef保存最新状态（可选） #

如果需要在同一个useEffect里访问最新的状态，可以借助useRef：

const [globalPosition, setGlobalPosition] = useState<any>(undefined);
const positionRef = useRef<any>(undefined);

// 每次状态更新时同步到ref
useEffect(() => {
    positionRef.current = globalPosition;
}, [globalPosition]);

useEffect(() => {
    const getLocation = new Promise<void>((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(success, error, {
            enableHighAccuracy: true,
        });
        function success(position: any) {
            setGlobalPosition(position);
            resolve();
        }
        function error(err: any) {
            console.log(err);
            reject();
        }
    });
    getLocation.then(() => {
        console.log(positionRef.current); // ref.current会拿到最新的状态值
    }).catch(err => console.error(err));
}, []);

内容的提问来源于stack exchange，提问作者AlaaKudo810