Hola chicos, recién comencé a aprender React-Native y tengo una pregunta sobre el estado.
Estaba practicando este concepto tratando de hacer un botón que mostrara cuántas veces lo presioné.
Mi plan era hacer una variable llamada clics que aumentará en 1 cada vez que la presione y configure el estado del clic en clics. Este es mi código.
export default function App() { const [clickState, setClicks] = useState(0) let clicks = 0 return ( <View style = {styles.container}> <StatusBar style="auto" /> <TouchableOpacity style={styles.button} onPress={()=>{setClicks(++clicks); console.log(clicks)}}> <Text>Clicks : {clickState}</Text> </TouchableOpacity> </View> ); }Pero aparentemente algo está mal y el valor de mis clics es aleatorio entre 1 y 2 cada vez que hago clic en él en lugar de aumentar en 1.
Así que tenía curiosidad sobre qué estaba haciendo mal y por qué los valores no aumentan como esperaba. También me alegraría si mostrara cómo lo implementaría si hay una mejor manera.
Gracias chicos.
Solo necesita actualizar clickState , sin necesidad de clics variables. Además, no se volverá a representar si incrementamos el valor del estado directamente, por lo que deberíamos incrementar el estado tomando su valor de estado anterior, como se muestra a continuación.
export default function App() { const [clickState, setClicks] = useState(0) return ( <View style = {styles.container}> <StatusBar style="auto" /> <TouchableOpacity style={styles.button} onPress={()=>setClicks(prevState => prevState + 1)}> <Text>Clicks : {clickState}</Text> </TouchableOpacity> </View> ); }