Buen día,
Mi código en términos generales busca obtener a partir de un fake api completar la información de los items que se encuentran en tres carruseles (componentes definidos de manera funcional), para ello hago uso de hooks useEffect y useState para el cargue de la data previa a la visualización del componente.
Tengo el siguiente código en react
import React, {useEffect,useState} from 'react'
import '../assets/styles/App.scss'
import Header from '../components/Header'
import Search from '../components/Search'
import Categories from '../components/Categories'
import Carousel from '../components/Carousel'
import CarouselItem from '../components/CarouselItem'
import Footer from '../components/Footer'
const App = () => {
const [videos, setVideos] = useState({mylist:[],originals:[],trends:[]})
useEffect( ()=> {
fetch('http://localhost:3000/initalState')
.then( response => response.json())
.then( data =>{
setVideos(data)
})
},[])
console.log(videos)
return (
<div className="App">
<Header/>
<Search/>
{ videos.mylist & videos.mylist.length > 0 &&
<Categories title="My List">
<Carousel>
{videos.mylist.map((video) => {
<CarouselItem key={video.id} {...video}/>
})}
</Carousel>
</Categories>
}
<Categories title="Platzivideo Originals">
<Carousel>
{videos.originals.map((video) => {
<CarouselItem key={video.id} {...video}/>
})}
</Carousel>
</Categories>
<Categories title="Trends">
<Carousel>
{videos.trends.map((video) => {
<CarouselItem key={video.id} {...video}/>
})}
</Carousel>
</Categories>
<Footer/>
</div>
)
}
export default App
El inconveniente que tengo es que al hacer el render del componente este no carga la información de la fake api que estoy usando, por lo que no me despliega las imagenes en los dos carruseles que tengo, es decir, el estado (videos) no se actualiza a tiempo.
Me he matado la cabeza, y aún no comprendo bien el por que la api no se carga en el mount del componente.