0

Tengo una page que maneja vídeos, los cuales se listan por secciones o mediante una búsqueda. El caso es que al actualizarse los estados del componente quiero que se vea reflejado en la web, pero esto no ocurre hasta que interacciono en el navegador con la app.

Básicamente, los estados se actualizan bien pero los cambios no se ven reflejados en tiempo real.

El código de la page es:

/* COMPONENTS */
imports ...

const getSections = (masterclasses: IMasterclass[]) => {
  // Función que devuelve un array de secciones con sus vídeos correspondientes(tested)
};

const Masterclass = () => {
  const [sections, setSections] = useState<ISection[]>([]);
  const [selectedVideo, setSelectedVideo] = useState<IMasterclass>();
  const [keywordsList, setKeywordsList] = useState<string[]>([]);
  const [keyword, seyKeyword] = useState<string>("");
  const [searchedVideos, setSearchedVideos] = useState<IMasterclass[]>([]);

  let { t } = useTranslation();

  const handleSearchMasterclassSubmit = (e: any) => {
    e.preventDefault();

    const value = e.target.search.value;
    setKeywordsList([...keywordsList, value]);
    seyKeyword("");
  };

  const handleKeywordChange = (e: any) => {
    seyKeyword(e.target.value);
  };

  const handleDeleteKeyword = (e: any) => {
    e.preventDefault();
    const keyword = e.target.querySelector("span").innerHTML;
    const keywords = keywordsList.filter((word) => word !== keyword);
    setKeywordsList(keywords);
  };

  useEffect(() => {
    getInitialMasterclasses().then((res) => {
      const sectionsList = getSections(res);
      setSections(sectionsList);
    });
  }, []);

  useEffect(() => {
    if (selectedVideo) {
      searchMasterclasses("hola que tal");
      /*getMasterclassComments(selectedVideo.id).then((res) => {
        console.log(res);
      });*/
    }
  }, [selectedVideo]);

  useEffect(() => {
    let videos: IMasterclass[] = [];
    keywordsList.map((word) => {
      searchMasterclasses(word).then((res) => {
        res.map((video: IMasterclass) => {
          if (
            !videos.find((v) => {
              return v.id === video.id;
            })
          ) {
            videos.push(video);
          }
        });
      });
    });
    setSearchedVideos(videos);
  }, [keywordsList]);

  return (
    <>
      <Head />
      <main className={styles.main}>
        <h1>{t("masterclass:title")}</h1>

        {/** ===> VIDEO PLAYER SECTION <===*/}

        {selectedVideo !== undefined ? (
          /*
          <VideoPlayerSection
            videos={[sections[0].videos]}
          />
          */
          <h1>Hay video</h1>
        ) : (
          <h1>No hay video</h1>
        )}
        {/** ===> END VIDEO PLAYER SECTION <===*/}

        {/** ===> SEARCH BAR <===*/}
        <div className={styles.search_input_container}>
          <form onSubmit={handleSearchMasterclassSubmit}>
            <InputSingleLine
              type="text"
              name="search"
              label={t("masterclass:search_label")}
              placeholder={t("masterclass:search_placeholder")}
              value={keyword}
              width={100}
              onChange={handleKeywordChange}
              optional={true}
            ></InputSingleLine>
          </form>

          {keywordsList.map((word, i) => {
            return (
              <form className={styles.keyword} key={i} onSubmit={handleDeleteKeyword}>
                <span>{word}</span>
                <button>X</button>
              </form>
            );
          })}
        </div>
        {/** ===> SEARCH BAR <===*/}

**ESTAS CONDICIONALES SON LAS DE RENDERIZADO, LO QUE QUIERO ES QUE, EN TIEMPO REAL, SI HAY VÍDEOS BUSCADOS SE RENDERIZE ESTA LISTA DE VÍDEOS, Y SI NO QUE SE MUESTREN LAS SECCIONES QUE SE CALCULAN CON EL useEffect DE ARRIBA

ESTO SE VE REFLEJADO EN LOS ESTADOS PERO EL RENDERIZADO NO FUNCIONA**

        {/** ===> SECTIONS && SEARCHED VIDEOS <===*/}
        {/** TODO: Controlar el renderizado teniendo en cuenta las secciones también
         *      --> if sections.length > 0 && searchedVideos.length === 0 ?????
         */}
        {searchedVideos.length === 0 ? (
          sections.map((section) => {
            return (
              <div key={section.name}>
                <VideoList
                  key={section.name}
                  title={capitalizeFirstLetter(section.name)}
                  videos={section.videos ?? []} // ==> section.videos ? section.videos : []
                  handleVideoClick={setSelectedVideo}
                />
              </div>
            );
          })
        ) : (
          <div>
            {searchedVideos.map((video) => {
              return (
                <StandardThumbnail
                  key={video.id}
                  onClick={
                    video.id ? () => setSelectedVideo(video) : console.log
                  }
                  locked={false}
                  selected={false}
                  image={
                    "/assets/images/lol-logo.png"
                  } /* TODO - Cambiar rutas de imagenes */
                  //image={video.image}
                />
              );
            })}
          </div>
        )}
        {/** ===> SECTIONS && SEARCHED VIDEOS <===*/}
      </main>
    </>
  );
};

export default Masterclass;

1 respuesta 1

2

Tuve un problema similar, en mi caso esta manejando un array de comentarios en una red social. Encontré que cuando actualizaba el estado usando el estado anterior concatenando el nuevo comentario, no se actualizaba el componente. Esto lo solucione creando un array intermedio el cual era una copia del estado, luego a la hora de actualizar el estado usaba el spread operator:

const FuncionActualizadora = (nuevoArray) =>{

  let intermedio = nuevoArray;

  setArray([...intermedio]);

}

Si deseas leer mas acerca de este problema, en gh hay un usuario que lo habla mas a detalle, te dejo el link por acá: https://github.com/vercel/next.js/discussions/32802

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.