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;