0
214
Vistas¿Cuál es el problema al intentar renderizar las cartas?
Estoy tratando de renderizar varias tarjetas extrayendo datos de la API. Pero el retorno es una matriz, no entiendo por qué el mapa no funciona.
const CharacterCard = () => { const [showModal, setShowModal] = useState(false) const openModal = () => { setShowModal(prev => !prev) } const characters = useRequestData([], `${BASE_URL}/characters`) const renderCard = characters.map((character) => { return ( <CardContainer key={character._id} imageUrl={character.imageUrl} /> ) }) return ( <Container> {renderCard} <ModalScreen showModal={showModal} setShowModal={setShowModal} /> </Container> ) } export default CharacterCardel gancho es este
import { useEffect, useState } from "react" import axios from "axios" const useRequestData = (initialState, url) => { const [data, setData] = useState(initialState) useEffect(() => { axios.get(url) .then((res) => { setData(res.data) }) .catch((err) => { console.log(err.data) }) }, [url]) return (data) } export default useRequestDataError de la consola:
Devolución de solicitud:
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Si observa el esquema de respuesta de axios , la entrada data "es la respuesta proporcionada por el servidor".
La respuesta de la API de Disney también incluye la entrada data .
Por lo tanto, en realidad quería obtener datos de Disney y no la respuesta de axios, arréglelo de la siguiente manera:
setData(res.data.data) Puede depurarlo registrando console.log(res) o retrocediendo en la cadena de errores console.log(characters) debería dar como resultado {data: [...]} , lo que sugiere que no puede ejecutar .map en un objeto .
·
Juan Pablo Isaza
Denunciar
Responde la pregunta