Estoy aprendiendo a reaccionar. Necesita mapear 5 imágenes de la API de tinyfac.es en ReactJS (Componentes de función). La imagen se obtiene correctamente (en la consola) pero no se puede representar. Si es posible, explique el error. Muchas gracias :D
Código:
import axios from "axios"; import React from "react"; import { useState, useEffect } from "react"; let base_url = `https://tinyfac.es/api/data?limit=50&quality=0`; function Storyslider() { const [Containers, setContainers] = useState([]); useEffect(() => { axios .get(base_url) .then((a) => { console.log(a.data[0].url); setContainers(a.data.results); }) .catch((b) => { console.log(Error); }); }, []); return ( <div> {Containers && Containers.map((Contain, index) => ( <img src={Contain.data[0].url} alt={Contain.data[0].gender} key={index} /> ))} </div> ); }exportar Storyslider predeterminado; Muchas gracias :D
No hay clave de results dentro del objeto data . Entonces, es por eso que sus datos no están configurados correctamente en el estado de Containers .
Aquí está el código de trabajo tuyo:
import axios from "axios"; import React from "react"; import { useState, useEffect } from "react"; let base_url = `https://tinyfac.es/api/data?limit=50&quality=0`; function Storyslider() { const [Containers, setContainers] = useState([]); useEffect(() => { axios .get(base_url) .then((a) => { console.log(a.data); setContainers(a.data); }) .catch((b) => { console.log(Error); }); }, []); return ( <div> {Containers && Containers.map((Contain, index) => ( <img src={Contain?.url} alt={Contain?.gender} key={index} /> ))} </div> ); } export default StorysliderY si desea representar una sola imagen (o la primera imagen) de la matriz, simplemente puede hacer
{Containers && <img src={Containers[0].url} alt={Containers[0].gender} />}