0
530
Views¿Por qué recibo demasiados renderizados en mi código y cómo resolverlo?
Estoy aprendiendo ReactJS y Javascript, y me ha ocurrido este problema, no sé por qué actúa así, pero creo que sé que mi función se procesa demasiadas veces configurando el Estado para setEpisodeList una y otra vez. Supongo, ¿cómo resuelvo esto en mi código?
El estado de info contiene un objeto de episodes que tiene un tipo de matriz.
Tengo más de 1000 episodios en 1 matriz, así que quiero dividir esa gran matriz de 1 episodes que contiene más de 1000 episodios en partes más pequeñas, cada parte será una matriz que contiene 10 episodios, es por eso que estoy usando episodeListChunk.push(info.episodes.splice(0, 10)) .
Entonces se convertirá
[ [chunk 1 - 10 episodes], [chunk 2 - 10 episodes], [chunk 3 - 10 episodes], [chunk 4 - 10 episodes], ... ] Si uso console.log(episodeListChunk) , veo que funciona bien.
Pero si estoy setEpisodeList(episodeListChunk) , obtendré demasiados renderizados. ¿Significa eso que cada vez que se ejecuta el bucle while, establecerá el Estado cada vez? Si es así, ¿qué enfoque debo hacer para manejar estas situaciones?
Aquí está mi código:
function MovieWatch({ instance }) { const [info, setInfo] = useState([]) const [done, setDone] = useState(false) const [episodeList, setEpisodeList] = useState([]) let { slug } = useParams() const getInfo = async () => { const { data } = await instance.get("/getInfo?slug=" + slug) setInfo(data.data) setDone(true) } useEffect(() => { getInfo() }, []) const chunkEpisode = () => { const episodeListChunk = [] while (info.episodes.length) { episodeListChunk.push(info.episodes.splice(0, 10)) } setEpisodeList(episodeListChunk) } return ( <> <div>Hello info page</div> {!done ? ( <Loading loading={true} background="#000000" loaderColor="#FFFF00" /> ) : ( <> {info ? chunkEpisode() : console.log("")} <div>Done loading</div> </> )} </> ) }3 answers
Answer question0
Después de leer algunas de las respuestas anteriores, intenté en lugar de crear 1 gran matriz al principio, luego simplemente la empalmo cada vez que recibo esa gran matriz, no sé si mi explicación es correcta o no. ..
De las formas de @Rejo Mathew de usar chunkEpisode(data.data) , entonces me pregunto cuál es el punto de establecer el estado de info , así que lo eliminé, y de @Steve K con @MWO explicó, traté de hacer esto. Está funcionando bien ahora.
Pero aún así, todavía no quiero hacerlo de esta manera, me parece raro que el primero, porque el primero me parece genial, raro por qué no funciona.
En lugar de setInfo , luego uso esa info para implementarla en la función, solo uso los datos que recibí sin configurarlos, luego combino el chunkEpisode en la función getInfo , luego uso useEffect para llamarlo solo una vez, supongo.
Aquí está el código después de hacerlo:
function MovieWatch({ instance }) { const [done, setDone] = useState(false) const [episodeList, setEpisodeList] = useState([]) let { slug } = useParams() const getInfo = async () => { const { data } = await instance.get("/getInfo?slug=" + slug) const episodeListChunk = [] while (data.data.episodes.length) { episodeListChunk.push(data.data.episodes.splice(0, 10)) } setEpisodeList(episodeListChunk) setDone(true) } useEffect(() => { getInfo() }, []) return ( <> <div>Hello info page</div> {!done ? ( <Loading loading={true} background="#000000" loaderColor="#FFFF00" /> ) : ( <> {console.log(episodeList)} <div>Done loading</div> </> )} </> ) }El resultado después de cambiar mi código de esta manera.
Pero por favor dame más consejos para optimizar esto.
0
Está configurando información cuando se procesa el componente. Luego, está verificando si la información está configurada y ejecutando la función chunkEpisodes. {info ? chunkEpisode() : console.log("")} . La información se configurará cada vez para que esté ejecutando constantemente la función chunkEpisodes. En lugar de ejecutar esta verificación, debe colocarla en un enlace useEffect con información como una dependencia y, si la información está configurada, ejecute la función chunkEpisodes. Al igual que:
useEffect(() => { if(info){ chunkEpisode() } }, [info])0
En React, cada vez que cambia cualquier estado, todo el componente se vuelve a renderizar.
Cuando esto suceda, React pasará por JSX e intentará detectar cambios en cualquier estado y volver a procesarlos.
Dado que ha invocado chunkEpisode() en JSX, está causando un cambio de estado, es decir, episodeList . Debido al cambio de estado, el JSX se vuelve a renderizar, invocando chunkEpisode() nuevamente. Esto está sucediendo infinitamente.
Un mejor enfoque sería invocar chunkEpisode() usando useEffect hook.
useEffect(() => { if (info) { chunkEpisode() } }, [info])Y borra esta linea
{info ? chunkEpisode() : console.log("")}