Veamos el código de abajo
import React from "react" export default function App() { const [isGoingOut, setGoingOut] = React.useState(false); function yeet() { setGoingOut(prevValue => prevValue ? false : true); } return ( <div className="state"> <h1 className="state--title">Do I feel like going out tonight?</h1> <div className="state--value" onClick={yeet}> <h1>{isGoingOut ? "Yes" : "No"}</h1> </div> </div> ) } Estoy llamando a la función set setGoingOut() a través de la función yeet() . Sin embargo, si llamo directamente a la función setGoingOut() como se muestra a continuación
import React from "react" export default function App() { const [isGoingOut, setGoingOut] = React.useState(false); setGoingOut(prevValue => prevValue ? false : true); return ( <div className="state"> <h1 className="state--title">Do I feel like going out tonight?</h1> <div className="state--value" onClick={setGoingOut}> <h1>{isGoingOut ? "Yes" : "No"}</h1> </div> </div> ) } arroja un error. ¿Está esto relacionado con la filosofía de React de no permitir que el estado se cambie directamente (la misma razón por la que no podemos cambiar una variable de estado count como count++ pero tenemos que hacer count + 1 ?
En el primer fragmento de código, está llamando a yeet cuyo cambio interno setGoingOut isGoingOut Esto seguramente funcionará
function yeet() { setGoingOut((prevValue) => (prevValue ? false : true)); } En el segundo fragmento, está cambiando de estado directamente, lo que creará infinite loop y producirá un error como:
Demasiados renderizados. React limita el número de renderizaciones para evitar un bucle infinito.
Debe cambiar el estado no siempre, sino solo cuando el usuario hace clic en el botón
setGoingOut(prevValue => prevValue ? false : true); Pero, si está tratando de llamar directamente a setGoingOut , entonces lo que hará es:
Pase el objeto de event a setGoingOut , que se convertirá en el valor de isGoingOut y luego no puede cambiar su valor porque está configurando el estado de isGoingOut como un nuevo objeto de event particularmente SyntheticEvent que React envía como argumento.
onClick={setGoingOut}Esta no es la forma en que debe cambiar de estado.
Puede cambiar el estado al hacer clic como:
<div className="state--value" onClick={() => setGoingOut((prevValue) => (prevValue ? false : true))}> <h1>{isGoingOut ? "Yes" : "No"}</h1> </div>