¿Por qué mi componente no volvió a hacer el renderizado cuando configuré State dentro de mi useEffect? Leí en Google que el componente se renderiza en otro momento si configuro State dentro de useEffect
Mi código :
export default function CarouselMusicGenres() { const [musicGenres, setMusicGenres] = useState(null) const setAllMusicGenres = () => { MusicGenresAPI.getAll() .then((response) => { if (response.status === 200) { setMusicGenres(response.data.musicGenres) } }) .catch((error) => { console.log(error) }) } const displayAllMusicGenres = () => { if (musicGenres && musicGenres.length > 0) { musicGenres.forEach((musicGenre) => { return ( <SwiperSlide> <Col className="genre" style={{ backgroundImage: `url(/assets/images/music-genres/${musicGenre.image_background_url})`, }} > <span>{musicGenre.genre}</span> <div className="transparent-background"></div> </Col> </SwiperSlide> ) }) } } useEffect(() => { setAllMusicGenres() }, []) return ( <Row className="carousel-genres"> <Swiper spaceBetween={10} slidesPerView={6}> {displayAllMusicGenres()} </Swiper> </Row> ) }Intento algo así en lugar de usarEffect pero aún no funciona
if (!musicGenres) { setAllMusicGenres() }Problema fijo
Necesito usar map en lugar de foreach para obtener la matriz devuelta y agregar return antes de mi musicGenres.map
para devolver una matriz, debe usar el mapa y debe agregar algo en su matriz de dependencia si desea volver a generar en el cambio. cuando lo haces asi
useEffect(() => { setAllMusicGenres() }, [])solo le está diciendo que configure AllMusicGenre en la carga y no en el cambio, si desea que cambie cuando ocurra un determinado cambio en musicGenres, debe agregarlo a la matriz.
useEffect(() => { setAllMusicGenres() }, [musicGenres ])necesita agregar dependencia para renderizarlo, una y otra vez, por ejemplo, en su caso, el estado de musicGenres será su dependencia, por lo que debe escribir su useState como a continuación:
useEffect(() => { setAllMusicGenres() },[musicGenres])Actualizará su componente cada vez que actualice musicGenres Nota: también necesita pasar la clave (siempre debe ser única) para que DOM pueda entender que algo cambia y se actualizará en consecuencia
Cuando escribe useEffect como se indica a continuación en ganchos:
useEffect(() => { setAllMusicGenres() }, [])actuará como componenteDidMount