Hola, estoy creando un proyecto, pero no estoy seguro de cómo usar useEffect, el botón alternar alternará entre verde y rojo y, al mismo tiempo, hay un contador que hará un seguimiento del número de alternancias presionadas y también hay una manera de usar alternar. sin utilizar el booleano. Gracias
function App() { const [isToggled, setToggled] = useState(true); const [counterState, setCounterState] = useState(0); const toggleGreenRed = () => setToggled(isToggled ? 'Green' : 'Red' ); const incrementCounter = () => setCounterState(counterState + 1); useEffect(() => {}); return ( <div> <button onClick={toggleGreenRed}>Toggle status</button> <h1>{isToggled}</h1> <h3>{counterState}</h3> </div> ); };Hay una manera simple de hacerlo, sin usar un useEffect hook .
Aquí puedes ver el ejemplo sin usar useEffect hook.
import { useState, useEffect } from "react"; const App = () => { const [isToggled, setToggled] = useState(true); const [counterState, setCounterState] = useState(0); const toggleGreenRed = () => { setToggled(!isToggled); setCounterState(counterState + 1); }; return ( <div> <button onClick={toggleGreenRed}>Toggle status</button> <h1>{isToggled ? "Green" : "Red"}</h1> <h3>{counterState}</h3> </div> ); };Aquí, lo que he hecho hasta ahora es: aumentar el contador al mismo tiempo, cada vez que presiona el botón.
Pero si quieres probar con useEffect aquí está el código:
import { useState, useEffect } from "react"; const App = () => { const [isToggled, setToggled] = useState(true); const [counterState, setCounterState] = useState(-1); const toggleGreenRed = () => setToggled(!isToggled); useEffect(() => { setCounterState(counterState + 1); }, [isToggled]); return ( <div> <button onClick={toggleGreenRed}>Toggle status</button> <h1>{isToggled ? "Green" : "Red"}</h1> <h3>{counterState}</h3> </div> ); }; Aquí, puede ver, useEffect tiene una dependencia isToggled . Lo que significa que, cada vez que cambia el valor de isToggled , useEffect se ejecuta y aumenta el valor del contador.
Puede obtener más información sobre useEffect hook en el documento oficial de reacción .