1

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?

4
  • Probaste inicializando tu data del tipo IpDetails | null?
    – René
    Commented el 21 abr. 2023 a las 3:21
  • El hook useIp recibe un generic type T, pero parece que no lo estás pasando, supongo que ese generic type es la interface ipDetails, sería algo como useIp<ipDetails>(…etc)
    – g.4
    Commented el 21 abr. 2023 a las 15:35
  • Gracias, eso lo solucionó. No me había dado cuenta
    – kilex
    Commented el 21 abr. 2023 a las 16:46
  • Si, de acuerdo, puedes publicarla.
    – kilex
    Commented el 22 abr. 2023 a las 1:21

1 respuesta 1

1

Se puede ver en la declaración del hook UseIp que necesita un Generic type T:

export const UseIp = <T,>(ip: string) => { ... }

Hay que enviar ese generic type, que es la interface ipDetails al invocar a UseIp:

const { data, error, loading } = UseIp<ipDetails>(`${BASE_URL}&ipAddress=${ip}`);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.