const [numbers, setNumbers] = ({number1: 2, number2:0}) const [aNumber, setNumber] = (1); useEffect(()=>{ },[numbers,aNumber]) const printNumbers = ()=>{ setNumbers({...numbers, number2:aNumber}); console.log(numbers); } return ( <> <button onClick={printNumbers}>print a number <button/> </> )cuando hago clic en el botón en la consola, imprimirá {number1: 2, number2: 0} Pero quiero que imprima {number1: 2, number2: 1} pero parece que reacciona, no actualiza mi gancho correctamente, pero ... .cuando hago clic otra vez en el botón se imprime {number1: 2, number2: 1}, pero lo necesito en el primer clic, ¿cómo puedo solucionarlo?
Configura el registro de la consola dentro de la función printNumbers. Dado que la actualización de estado es asíncrona, debe colocar console.log dentro de useEffect para recibir una notificación después de una actualización. Algo similar a:
useEffect(()=>{ console.log(numbers); },[numbers,aNumber]) const [numbers, setNumbers] = ({number1: 2, number2:0}) const [aNumber, setNumber] = (1); const printNumbers = ()=>{ setNumbers({...numbers, number2:aNumber}); }En React, las actualizaciones de estado son asíncronas y por lotes. No se garantiza que setState se ejecute (y en la práctica, nunca habrá nuevos valores disponibles) antes que el código anterior. Para resolver esto, use una variable local para retener una copia del nuevo estado que puede enviar con su setState e iniciar sesión de inmediato:
const printNumbers = () => { const newNumbers = { ...numbers, number2: aNumber }; setNumbers(newNumbers); console.log(newNumbers); }