Soy un estudiante de React y quiero entender algo. El siguiente código no funciona, es solo un componente con dos botones que suman o restan un número y lo muestran. Aquí está el código completo:
import React from "react"; import { useState } from "react"; const Compteur = () => { let i = 0; const [number, setNumber] = useState(0); const increment = () => { i++; setNumber(i); }; const decrement = () => { i--; setNumber(i); }; return ( <div> <button type="button" onClick={increment}> + </button> <button type="button" onClick={decrement}> - </button> <p>Number : {number}</p> </div> ); }; export default Compteur;Pero si reemplazo setNumber(i) por setNumber(number + 1), funciona bien. ¿Cuál es el problema con esta variable i? Gracias por tu ayuda !
¡Bienvenido a Reaccionar!
El problema en su ejemplo es que cada vez que el componente se vuelve a renderizar (en su caso debido a un cambio de estado), i se reinicializa y se le asigna un valor de 0 . Creo que está pensando en el componente más como un bucle, en lugar de un archivo javascript. React hace un gran trabajo al mantener el estado, y ese estado seguirá siendo el mismo aunque se vuelva a renderizar el componente, por lo que funciona como se esperaba cuando usa number (una parte del estado de React) en lugar de i
Entonces, su problema aquí es establecer let i = 0; ya que el código de reacción se vuelve a ejecutar en cada renderizado, lo que se debe al cambio de estado (entre otras formas).
Entonces, cuando llamas a setNumber , reacciona y dice "bien, vuelve a renderizar la página" y baja por tu código, y ve "establecer i en 0" y luego, cuando incrementas, el código dice "i++" o en este caso " 0 + 1" (porque i se establece en 0 nuevamente).
Esencialmente, cada vez que reaccionar vuelve a renderizar el componente, restablecerá el valor en la variable. Es por eso que tenemos que usar useState porque reaccionar puede realizar un seguimiento de esos valores.
Su ejemplo setNumber(number + 1) es cómo debería escribir esto.
Está utilizando la variable i que se reinicia cada renderizado, su código debería ser algo como esto
const increment = () => { setNumber(number + 1); } const decrement = () => { setNumber(number - 1); }