如何将 object 从自定义挂钩解构为用户位置的 getCurrentPosition

Question

I have created a simple custom react hook to get users location.

import { useState, useEffect } from "react";

const useGeoLocation = async () => {
    const [location, setLocation] = useState({
        loaded: false,
        accuracy: '',
        coordinates: { lat: "", lng: "" },
        error: null
    });
    // console.log(location)

    const onSuccess = (location) => {
        setLocation({
            loaded: true,
            accuracy: location.accuracy,
            coordinates: {
                lat: location.coords.latitude,
                lng: location.coords.longitude,
            },
        });
    };

    const onError = (error) => {
        setLocation({
            loaded: true,
            error: {
                code: error.code,
                message: error.message,
            },
        });
    };

    useEffect(() => {
        if (!("geolocation" in navigator)) {
            onError({
                code: 0,
                message: "Geolocation not supported",
            });
        }

        navigator.geolocation.getCurrentPosition(onSuccess, onError);
    }, []);

    return location;
};

export default useGeoLocation;

However when I try to destructure location by calling the hook in my functional component. It is returning undefined.

Somewhere in my functional component

const { location } = useGeoLocation()
console.log(location)

I have tried to console log the whole query with

const location = useGeoLocation()
console.log(location)

However I am getting a promise that is fullfilled after sometime and my location object is present inside the result but I am not able to get this value out.

I am noob and expecting help from experts.

Answer 1

Please stop adding async everywhere. It should be used only if you want to use await . async makes your function return a promise

import { useState, useEffect } from "react";

const useGeoLocation = () => {
    const [location, setLocation] = useState({
        loaded: false,
        accuracy: '',
        coordinates: { lat: "", lng: "" },
        error: null
    });
    // console.log(location)

    const onSuccess = (location) => {
        setLocation({
            loaded: true,
            accuracy: location.accuracy,
            coordinates: {
                lat: location.coords.latitude,
                lng: location.coords.longitude,
            },
        });
    };

    const onError = (error) => {
        setLocation({
            loaded: true,
            error: {
                code: error.code,
                message: error.message,
            },
        });
    };

    useEffect(() => {
        if (!("geolocation" in navigator)) {
            onError({
                code: 0,
                message: "Geolocation not supported",
            });
        }

        navigator.geolocation.getCurrentPosition(onSuccess, onError);
    }, []);

    return location;
};

export default useGeoLocation;

Usage

const location = useGeoLocation()
console.log(location)