0
200
Vistas¿Por qué no estoy definido al mapear y pasar a través de un accesorio (ReactJS)?
Puedo obtener los datos correctamente y verlos en la consola como quiero que se muestren, pero el mapeo y la transmisión es el problema en el que parece fallar.
este es mi codigo
import React, {useState, useEffect} from 'react' import axios from 'axios'; import server from '../backend/server.jsx'; import Home from './Home'; function ListImage() { const [api, setApi] = useState(''); const getAllData = () => { axios .get(`${server}/images`) .then((response) => { console.log(response.data); setApi(response.data); }) .catch((error) => { console.log(error); }); } useEffect(() => { getAllData(); },[]); return ( <> {api ? api.map((item) => { console.log(item); return <Home data={item.data} />; }): <p>Not found</p>} </> ) } export default ListImageY luego paso a esto donde solo me queda indefinido en la consola
import React from 'react' function Home({ data }) { console.log(data) return ( <> <p>{data}</p> </> ) } export default Home
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Prueba con esto. Creo que se llama a su función de mapa cuando se realiza el renderizado inicial. Asegúrese de la respuesta. Los datos deben devolver una matriz.
pd: renderiza su componente de inicio en una matriz. Eso está mal. Pase los datos al componente y mapee su matriz en el componente de inicio.
import React, {useState, useEffect} from 'react' import axios from 'axios'; import server from '../backend/server.jsx'; import Home from './Home'; function ListImage() { const [data, setData] = useState(null); const getAllData = () => { axios .get(`${server}/images`) .then((response) => { console.log(response.data); setData(response.data); }) .catch((error) => { console.log(error); }); } useEffect(() => { getAllData(); },[]); return ( <> {api ? <Home data={data} /> : <p>Loading...</p>} </> ) } export default ListImage
·
Juan Pablo Isaza
Denunciar
Responde la pregunta