Как получить nextState, приходит в this.state прошлое значение state?

Question

[Alex Polyakh]

Откройте консоль введите в два поля значение, когда они больше или равны 8, меняем класс кнопки, но когда происходит проверка на длину, и мы уберем один символ, в state у нас по факту 7 но при получении длины у нас 8 и состояние кнопки остается активное, через setTimeout работает но это костыль.
готовый компонент тут => stackblitz.com/edit/template?file=components%2FForm.js
Откройте консоль, можно увидеть длину поля логин.
Итоговый результат, когда у нас в поле 8 символов один мы убрали у нас 7 убрать активный класс у кнопки.

Answer 1

[Антон Спирин]

setState асинхронная функция и в нее можно передать колбек вторым аргументом:

this.setState({ ... }, () => this.getStateValues());

По-хорошему вам следует переписать хандлер, так как вы создаете новые копии каждый рендер, тем более вы передаете свойство name в инпуты, но почему-то не используете в хандлере.
Перепишите так:

handleChange = ev => {
   const { name, value } = ev.target;
   const symbols = split('')(value);
   const result = filter(i => characterVerification(i), symbols);

   this.setState({
     [name]: join('')(result)
    }, () => this.getStateValues(),
  );
};

Еще непонятно зачем было тянуть в проект ramda.

Comments

[Alex Polyakh]

Спасибо, не совсем понял вот это "переписать хандлер, так как вы создаете новые копии каждый рендер", если Вам не сложно опишите более подробно. Спасибо огромное.

[Антон Спирин]

Polyakh, вы создаете хандлеры каждый рендер, например тут:

<input
  onChange={this.handleChange('login')} // при каждом рендере тут создается функция
  value={login}
  type='text'
  name='login' // определяете, но не используете
 />

Правильно переписать, как я посоветовал и использовать так:

<input
  onChange={this.handleChange} // передается хандлер
  value={login}
  type='text'
  name='login' // используется
 />

[Alex Polyakh]

Спасибо большое. Надеюсь когда то буду писать хороший код, очень много прилагаю к этом усилий.