Tengo una page en la cuál me tengo que traer información de backend de forma ordenada y setear los estados para mostrar el HTML con los elementos.
Me llega el ID de una Masterclass por URL, y el orden de peticiones a la base de datos es el siguiente:
- Me traigo la Masterclass con toda su información
- Me traigo los vídeos de la misma sección que la masterclass en cuestión
Pues bien, lo que ocurre es que al hacer el paso 1, tengo que esperar a que se complete la transacción y se setee el estado correctamente, pues ese estado lo uso para el paso 2. En el código se ve mejor:
const Masterclass = () => {
const router = useRouter();
const [video, setVideo] = useState<IMasterclass | undefined>(undefined);
let sectionVideos:IMasterclass | any[] = [];
useEffect(() => {
const { id } = router.query;
// PASO 1
getMasterclass(id).then((mc) => setVideo(mc));
// QUIERO ESPERAR A QUE SE SETEE EL VÍDEO ANTES DE PASAR AL PASO 2
// PASO 2
getInitialMasterclasses().then((res) => {
const data = res.filter((x:any) => x.section.name === video?.section.name);
sectionVideos = data;
});
console.log(video, sectionVideos);
}, []);
useEffect(() => {
}, [video]);
return (
<>
<Head />
<main className={styles.main}>
{/** ===> VIDEO PLAYER SECTION <===*/}
{video !== undefined ? (
<VideoPlayerSection videos={sectionVideos} currentVideo={video} />
) : (
<></>
)}
{/** ===> END VIDEO PLAYER SECTION <===*/}
</main>
</>
);
};
export default Masterclass;
Lo que ocurre es que se ejecuta el paso 2 antes de que acabe el 1, por lo que no se trae ninguna información porque el estado video está en undefined, y no sé como solucionar esta problemática.. ¿Alguna idea?