La respuesta de una llamada a una API encargada de devolver información sobre una dirección IP está estructurada de este modo:
interface IpDetails {
ip: string;
location: Location;
as: As;
isp: string;
}
interface As {
asn: number;
name: string;
route: string;
domain: string;
type: string;
}
interface Location {
country: string;
region: string;
city: string;
lat: number;
lng: number;
postalCode: string;
timezone: string;
geonameId: number;
}
Y el custom hook que hago para hacer la llamada de dicha API es esta:
export const UseIp = <T,>(ip: string) => {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const response = await axios.get(ip);
setData(response.data);
} catch (error:any) {
setError(error.message);
}
setLoading(false);
};
fetchData();
}, [ip])
return { data, loading, error };
}
Quiero usar esa data para renderizar un mapa con leaftlet, de esta forma:
const { data, error, loading } = UseIp(`${BASE_URL}&ipAddress=${ip}`);
if (loading) return <div>Loading...</div>;
if (error) return <div>There was an error: {error}</div>;
<MapContainer
center={[data.location.lat, data.location.lng]}
zoom={13}
scrollWheelZoom={false}
>
</MapContainer>
Si funciona pero al acceder a la informacion de la data me sale el siguiente error de typescript:
Property location does not exist on type {}
Soy nuevo en typescript y creo que se debe a que no está correctamente tipado, como tengo que hacer para que ese error desaparezca ? seria implementando la interfaz del principio ? y si es asi, como se haria?
IpDetails | null
?