Así que aquí hay un fragmento de código para onClick EventHandler en React
código:
function handleChange(event) { console.log('before 1st update') setCount(prevCount => { console.log('inside 1st update') return prevCount + 1 }) console.log('After 1st update') setCount(prevCount => { console.log('inside 2nd update') return prevCount + 1 }) console.log('After 2nd update')}Producción :
antes de la 1.ª actualización
dentro de la primera actualización
Después de la 1.ª actualización
Después de la segunda actualización
dentro de la segunda actualización
Rendimiento esperado :
antes de la 1.ª actualización
dentro de la primera actualización
Después de la 1.ª actualización
dentro de la segunda actualización
Después de la segunda actualización
¿Alguien podría explicar? Además, el ejemplo proporciona evidencia suficientemente decente de que la función de actualización es síncrona y la actualización es asíncrona (en el caso de los eventos del navegador).
setState en React actúa como una función asíncrona.
Por lo tanto, colocar un console.log(state) justo después de configurarlo probablemente mostrará el valor anterior, ya que en realidad no termina de actualizar el estado hasta que se ejecuta el comando de registro.
Lo que podemos hacer para actuar sobre un cambio en el estado es usar el useEffect incorporado de React que tiene el estado relevante como una dependencia para verificar el valor.
Ejemplo:
useEffect(() => { console.log(state); }, [state]);Básicamente, la función de devolución de llamada del ejemplo se ejecutará cada vez que cambie el estado.
En tu caso, debería verse así:
function handleChange(event) { console.log('before 1st update') setCount(prevCount => { console.log('inside 1st update') return prevCount + 1 }) setCount(prevCount => { console.log('inside 2nd update') return prevCount + 1 }) } useEffect(() => { console.log('count has been updated:', count) }, [count])El resto de los registros son válidos.