1

Estoy realizando una aplicación (típica aplicación que te llama a la API de Giphy y te renderiza los Gifs) y estoy haciéndola con React + TypeScript. He aquí mi código:

import React, { useState, useEffect } from "react";

export interface GifGridProps {
  information: string;
}

export interface GifsInterface {
  id?: string;
  title?: string;
  url?: string;
}

function GifGrid(props: GifGridProps): JSX.Element {
  const { information } = props;

  const [images, setImages] = useState<GifsInterface>({
    id: "",
    title: "",
    url: "",
  });

  useEffect(() => {
    getGifs();
  }, []);

  const getGifs = async () => {
    const url =
      "https://api.giphy.com/v1/gifs/search?api_key=${api_key}&q=Real+Madrid&limit=10";
    const resp = await fetch(url);
    const { data } = await resp.json();

    const gifs = data.map((img: any) => {
      return {
        id: img.id,
        title: img.title,
        url: img.images?.downsized_medium.url,
      };
    });

    setImages(gifs);
  };

  return (
    <div>
      <h3>{information}</h3>
      <ol>
        {images.map((img) => (
          <li key={img.id}>{img.title}</li>
        ))}
      </ol>
    </div>
  );
}

export default GifGrid;


Aún no he hecho la app dinámica, en el sentido de que busque en la API la info que llega por parámetros (que sería la que llega a través de la interfaz GifGridProps) sino que como paso previo estoy intentando cargar info sacada ya de una llamada a la API (en este caso, gifs del string "Real Madrid"). El caso es que he creado una interfaz para la estructura que saco de los datos que me devuelve la API, y ahora quiero listar el title, con su id como key. Pero no me deja mapear images porque me da este error "Property 'map' does not exist on type 'GifsInterface'" y tampoco se me ocurre otra forma de recorrer este estado del componente, porque un Foreach de forma implícita no devuelve nada (devuelve void) y tampoco sería la solución. ¿Cómo podría hacerlo? Gracias.

P.D. No pongo la api_key por ser privada, pero se puede obtener rápidamente de Giphy

1 respuesta 1

2

"Property 'map' does not exist on type 'GifsInterface'"

Esto es cierto, no existe el método map para este tipo de variable, porque en tu código has definido que tu estado se inicialice con una variable de tipo GifsInterface con esta estructura:

{
    id: "",
    title: "",
    url: "",
}

Entonces la primera vez (cuándo no se han obtenido los datos), lo que tienes en la variable images es este objeto y tratas de hacer images.map; lo cuál no funciona porque map es un método que poseen los arrays y no los objetos.

Lo que deberías de hacer es inicializar la variable como un array vacío, que luego se llene cuando haces el fetch de los datos:

const [images, setImages] = useState<GifsInterface[]>([]);

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.