En el siguiente código, el enlace que se muestra a continuación no cambia el estado de la variable newName.

import React, { useState } from 'react' const App = () ={amp}gt; { const [ persons, setPersons] = useState([ { name: 'Arto Hellas' } ]) const [ newName, setNewName ] = useState('') const textChangeHandler = (event)={amp}gt;{ event.preventDefault() setNewName(event.target.value) // WORKS FINE } const submitHandler = (event)={amp}gt;{ event.preventDefault() let temp = {name:newName} setNewName('') //////////////////////////////////////// PROBLEM - doesnot set state!! console.log('tenp name is',temp.name) console.log('new name is',newName) setInterval(()={amp}gt;console.log("Set Interval",newName), 1000) } return ( {amp}lt;div{amp}gt; {amp}lt;h2{amp}gt;Phonebook{amp}lt;/h2{amp}gt; {amp}lt;form onSubmit={submitHandler}{amp}gt; {amp}lt;div{amp}gt; name: {amp}lt;input onChange={textChangeHandler} /{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;button type="submit" {amp}gt;add{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;h2{amp}gt;Numbers{amp}lt;/h2{amp}gt; {persons.map((person) ={amp}gt; {amp}lt;Person key = {person.name} name={person.name}/{amp}gt; )} {amp}lt;/div{amp}gt; ) } const Person = ({name})={amp}gt; {amp}lt;p{amp}gt; {name} {amp}lt;/p{amp}gt; 

setNewName funciona bien y el nombre se actualiza cuando se escribe algo en el cuadro de entrada. Sin embargo, cuando envío el botón, el setNewName no parece funcionar. Incluso después de la actualización, al ejecutar setNewName el nombre sigue siendo el antiguo. Incluso probé un setInterval (pensando que puede deberse a la naturaleza asincrónica de JS) e imprimí el nuevo nombre, pero aún muestra el antiguo nombre.

¿Cuál es el problema y cómo se puede solucionar?

Gracias

Si observa su función submitHandler , notará que el nombre en sí no ha cambiado … permanece vacío como en su estado inicial. Reaccione solo recargar si el valor del estado cambia como se muestra a continuación

 const submitHandler = (event)={amp}gt;{ event.preventDefault() let temp = {name:newName} //setNewName('') // your value is not changing here ... removing line setNewName(temp.name) // changing the name here with the one in temp console.log('tenp name is',temp.name) console.log('new name is',newName) setInterval(()={amp}gt;console.log("Set Interval",newName), 1000) } 

Como sabes, establecer un estado es asíncrono. Nunca use funciones de programación como setTimeout setInterval para cerrar la sesión del valor de estado.

Use useEffect en useEffect lugar —

  useEffect(() ={amp}gt; { console.log("value is", newName); }, [newName]); 

Su gancho funciona bien sin problemas. Aquí hay un codeSandbox que muestra que todo funciona bien.

En React setState no es síncrono (con componentes de clase y ganchos). Por lo tanto, no puede esperar que un nuevo estado esté disponible de inmediato. Debe cambiar la implementación de la función submitHandler.