Как правильно изменять state?

194

29 октября 2021, 21:40

У меня есть элемент инпута

<Input type='text' onChange={this.onEmailChanged} value={this.state.email} placeholder="Email"/>

Функция обработки:

onEmailChanged = (e) => {
this.setState({
    email: e.target.value
})
console.log(this.state.email);
}

Но когда я изменяю стейт вводя данные он изменяется с задержкой, вот так:

ввел 't' => консоль : (пусто)

ввел 'test@mail.ru' => консоль : 'test@mail.r'

подскажите, как избавиться от такого эффекта?

Answer 1

Ты правильно изменяешь state. Но дело в том, что это асинхронная операция, и что бы выполнить некий код(в твоем случае вывод в консоль) только после того как произошла мутация состояния, можно, например, использовать callback функцию:

this.setState(
  {
    email: e.target.value
  },
  () => {
    console.log(this.state.email);
  }
);

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Работа с URL, Node.js

Работаю с Nodejs

221

.NET - RSA не может декодировать

Ошибка идёт при RSADecrypt

Записание в TextBox несколько раз подряд

Возникла проблема, пишу программу на WPF и мне нужно заполнять TextBox Дело в том, что я заполняю TextBox последовательно после проверки разных условий

171

Style из ResourceDictionary в UserControl

Создал проект следующего содержания:

131