0

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:

  1. Me traigo la Masterclass con toda su información
  2. 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?

2 respuestas 2

0

La solución es concatenando promesas.

useEffect(() => {
    const { id } = router.query;
    // PASO 1
    getMasterclass(id).then((mc) => {
        setVideo(mc) // paso1
        return getInitialMasterclasses()
    })
    .then((res) => {
      const data = res.filter((x:any) => x.section.name === 
        video?.section.name); //paso 2
      sectionVideos = data;
    });
    console.log(video, sectionVideos);
  }, []);
0

Puedes encapsular el contenido del useEffect dentro una función asíncrona para poder indicar que debe esperar la respuesta del servidor antes de continuar con la ejecución del programa:

useEffect(() => {
    async function customName() {
        const { id } = router.query;
        // PASO 1
        const mc = await getMasterclass(id);
        setVideo(mc);
        // PASO 2
        const res = await getInitialMasterclasses()
        const data = res.filter((x:any) => x.section.name === video?.section.name);
        sectionVideos = data;
        console.log(video, sectionVideos);
    }
    customName() 
}, [])

puedes remplazar customName por el nombre de tu preferencia.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.