Creé un gancho personalizado, que se puede usar para obtener la ubicación de los usuarios y encontrar el marcador más cercano en el mapa según esa información.
En este momento funciona, pero el primer objeto que devuelve es el valor predeterminado useStates . La respuesta se ve así:
{ coordinates: { lat: '', lng: '' }, loaded: false }Después de devolver el objeto por primera vez, comienza a funcionar como debería:
{ coordinates: { lat: 45.024335, lng: 19.277089 }, loaded: true }Básicamente, no quiero que el gancho envíe objetos vacíos, sin valores. ¿Cómo puedo arreglar esto?
const useGeoLocation = (markers) => { const [location, setLocation] = useState({ loaded: false, coordinates: { lat: "", lng: "" }, }); const onSuccess = (location) => { // User location succesfully fetched, converting data format. const targetPoint = turf.point([ location.coords.latitude, location.coords.longitude, ]); // Fetching data from markers parameter and converting data format. var arr = []; markers.map((marker) => arr.push(turf.point(marker.location))); var points2 = turf.featureCollection(arr); // Calculating which marker is nearest to targetPoint. var nearest = turf.nearestPoint(targetPoint, points2); // Setting location of nearest marker to usestate. setLocation({ loaded: true, coordinates: { lat: nearest.geometry.coordinates[0], lng: nearest.geometry.coordinates[1], }, }); }; const onError = () => { setLocation({ loaded: true, coordinates: { lat: 65.024335, lng: 27.277089, }, }); }; useEffect(() => { if (markers) { if (!("geolocation" in navigator)) { onError(); } navigator.geolocation.getCurrentPosition(onSuccess, onError); } }, [markers]); return location; };En lugar de simplemente devolver el objeto de location como un todo, puede dividir el retorno en un objeto con valores para los datos, un estado de carga y un mensaje de error si es necesario. Por ejemplo:
const useGeoLocation = (markers) => { const [location, setLocation] = useState(undefined); const [error, setError] = useState(""); const onSuccess = (location) => { // Rest of the success handler... setLocation({ coordinates: { lat: nearest.geometry.coordinates[0], lng: nearest.geometry.coordinates[1], }, }); }; const onError = () => { setLocation({ coordinates: { lat: 65.024335, lng: 27.277089, }, }); setError("Some error message"); }; useEffect(() => { if (markers) { if (!("geolocation" in navigator)) { onError(); } navigator.geolocation.getCurrentPosition(onSuccess, onError); } }, [markers]); return { data: location, isLoading: !location && !error, error: error, }; };Luego, al llamar al gancho, puedes hacer:
const {data, isLoading, error} = useGeoLocation(); y verifique el valor de data , o que isLoading y error sean falsos, antes de hacer nada.