В следующем коде хук, показанный ниже, не меняет состояние переменной 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 работает нормально, и имя обновляется, когда что-либо вводится в поле ввода. Однако, когда я отправляю кнопку, setNewName , кажется, не работает. Даже после обновления при выполнении setNewName имя остается старым. Я даже попробовал setInterval (думая, что это может быть связано с асинхронной природой JS) и напечатал newName, но он все еще показывает старое имя.

В чем проблема и как ее можно исправить?

Благодарность

Если вы посмотрите на функцию submitHandler , вы заметите, что само имя не изменилось … оно остается пустым, как и в исходном состоянии. Реагируйте только на перезагрузку, если значение состояния изменяется, как показано ниже

 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) } 

Как вы знаете, установка состояния является асинхронной. Никогда не используйте функции планирования, такие как setTimeout setInterval чтобы выйти из значения состояния.

useEffect этого используйте useEffect

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

У вас крючок работает нормально, без проблем. Вот codeSandbox, показывающий, что все работает нормально.

В React setState не является синхронным (с компонентами класса и хуками). Поэтому вы не можете ожидать, что новое состояние будет доступно сразу. Вам нужно изменить реализацию функции submitHandler.