Soy nuevo en Reactjs y estoy trabajando en un proyecto.
Un escenario típico al que me enfrento es el manejo de eventos y el almacenamiento de valores dentro de variables:
let counter = 0; function clickHandler() { counter++; } Por absurdo que parezca, todo el tiempo que uso este patrón en reactjs obtengo counter undefined , la única forma en que puedo cambiar esto es poner el counter dentro de un state . Probé un PoC en codesandbox y todo funciona, así que me estoy volviendo loco tratando de entender la razón de este extraño comportamiento.
Entonces mi pregunta: ¿hay algún escenario de reacción típico que haga que una función/controlador no vea su cierre correctamente?
Una forma típica de hacer esto en reaccionar será usar el estado. Consulte la documentación del gancho useState https://reactjs.org/docs/hooks-state.html
import { useState } from 'react'; const Component = () => { const [counter, setCounter] = useState(0) const incrementCounter = () => setCounter(counter + 1) return ( <button onClick={incrementCounter}>Increment</button> ) }