0
153
Vistasestoy tratando de mostrar los gifs en la interfaz de usuario haciendo clic en gif particular, cuando busco los datos por mapa obtengo un error de tipo
así es como obtengo la identificación de un gif al hacer clic en ellos, pero obtengo este error TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'fixed_height'), quiero mostrar fixed_height en la interfaz de usuario.
<> {Object.keys(gifs).length === 0 ? ( <div>loading...</div> ) : ( <div className="gif-section"> {gifs.data.map((items) => { return ( <a href="#" className="image-gifs" key={items.id}> <img className="live-gifs" onClick={() => getGifId(items.id)} src={items.images.fixed_height.url} alt="..." /> </a> ); })} </div> )} </>aquí estoy buscando el gif por id y mostrándolo.
import axios from "axios"; import { useState } from "react"; import { useEffect } from "react"; const GifInText = ({ gifId }) => { const [post, setPost] = useState({}); console.log("post:", post); const fetchData = async () => { axios .get(`https://api.giphy.com/v1/gifs/${gifId}`, { params: { api_key: "Xoa3mXrWxKXw6lJscrKUTsbZsXLbGuGY", gif_id: gifId } }) .catch((error) => { console.log("error at fetching gifID2", error); }) .then((response) => { setPost(response.data); }); }; useEffect(() => { fetchData(); }, []); return ( <div> {Object.values(post).length && Object.values(post).map((items) => { return ( <> <h1>{items.id}</h1> <img className="live-gifs" src={items.images.fixed_height.url} alt="..." /> </> ); })} </div> ); }; export default GifInText;
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Según la imagen que compartiste. Si la publicación es un objeto con un solo dato gif, puede usar simplemente post.data.url en lugar de items.images.fixed_height.url y recorrer Object.values(post) .
{post.data.url && ( <> <h1>{post.id}</h1> <img className="live-gifs" src={post.data.url} alt="..." /> </> )}
·
Juan Pablo Isaza
Denunciar
Responde la pregunta