Tengo el siguiente código:
const Button = () => { const [numbers, setNumbers] = useState({ a: 10, b: 30, c: 100, d: new Date() }); const click = () => { setTimeout(click2, 2000); }; const click2 = () => { setNumbers({ a: numbers.a + 1, b: numbers.b + 1, c: numbers.c + 1, d: new Date() }); }; return ( <> <button onClick={click}>+</button> <p>{numbers.a}</p> <p>{numbers.b}</p> <p>{numbers.c}</p> <p>{numbers.d.toLocaleString()}</p> </> ); };Cuando presiono el botón una vez, el código funciona correctamente. Pero si presiono el botón dos veces seguidas, el código solo se ejecutará una vez. Explique por qué sucede esto y cómo hacer que el código se ejecute cada vez que hace clic en él.
Es porque la función click2 tendrá el valor del estado anterior cuando se haga clic por segunda vez, ya que el estado setState del primer clic aún no se ha ejecutado. En lugar de hacer referencia directamente a statevalue, use el método prevState para configurar el estado, de acuerdo con eso, cambie su función click2 como se muestra a continuación.
setNumbers((num) => { return { a: num.a + 1, b: num.b + 1, c: num.c + 1, d: new Date() }; }); };Consulte este codeandbox como referencia