0
186
VistasReact limita el número de renderizados para evitar un error de bucle infinito
A continuación se muestra mi código
function App() { const [isImportant, setIsImportant] = useState("Yes") function handleClick() { setIsImportant("No") } return ( <div className="state"> <h1 className="state--title">Is state important to know?</h1> <div className="state--value" onClick ={setIsImportant("No")} > {isImportant} </div> </div> ) } 
Sin embargo, aparece el error que dice 'Error no detectado: demasiados renderizados. React limita el número de renderizaciones para evitar un bucle infinito.'
Si alguien puede explicar por qué está ocurriendo el error, ¡se lo agradecería!
3 Respuestas
Responde la pregunta0
Problema
Mirando su código actual, esta parte:
onClick ={setIsImportant("No")}está llamando a setIsImportant cada vez que su página se procesa, y debido a que esta función modifica el estado de su componente, intenta volver a procesar el mismo componente nuevamente, lo que provoca un bucle infinito.
Solución
Hay dos formas de resolver este problema, ya sea envolviendo el método setIsImportant en un contenedor:
<div className="state--value" onClick ={() => setIsImportant("No")} > {isImportant} </div>o simplemente usando la función que acaba de crear:
<div className="state--value" onClick ={handleClick} > {isImportant} </div>0
El controlador onClick necesita una función, pero lo que pasa es el resultado de llamar a setIsImportant("No") , por lo que setIsImportant("No") se llama inmediatamente al renderizar.
Para solucionarlo, pase una función en su lugar. De hecho, ya tiene uno, handleClick , así que use onClick={handleClick} .
0
- Está invocando
setIsImportantenonClickdirectamente - Cada vez que ocurre el renderizado
setIsImportant("No")y setState hace que el componente se vuelva a renderizar y luego volver a renderizar activarásetIsImportant("No")nuevamente y así sucesivamente... lo que conduce a un re-renderizado infinito. - Estás configurando el estado una y otra vez y nunca se detiene.
Solución
Para evitar esto, debe pasar una función al controlador onClick
onClick ={() => setIsImportant("No")}