Вопрос №56014 от пользователя Вадим Белинович в уроке «Асинхронная обработка», курс «JS: React»

Roman Makarov

Вадим Белинович,

const { input } = this.state;
const value = target.value;
this.setState({ input: value });
const res = await axios.get('/countries', {
  params: { term: input },
});

А каким образом setState должен изменить переменную input, в которую записано примитивное значение?

Вадим Белинович

Roman Makarov, одна строчка заменится на другую. Или я что-то не так понял?

Roman Makarov

Вадим Белинович, при деструктуризации вы объявили переменную input. Она содержит примитивное значение и никоим образом не связана с this.state.input. Вызов this.setState изменит стейт, но, во-первых, это произойдёт асинхронно, т.е. после того кода, который у вас идёт дальше, во-вторых, никак не повлияет на переменную input, объявленную при текущем вызове функции.

Для иллюстрации:

const state = {
  input: 'a',
};

const { input } = state;
state.input = 'b';
console.log(input); // ??

Вадим Белинович

Roman Makarov, а как решать такую проблему?

Roman Makarov

Вадим Белинович, а какая тут проблема? В функции у вас есть значение, полученное из события. Вы его кладёте в стейт (чтобы контролировать инпут), и его же отправляете на сервер. Из стейта это значение попадёт в инпут при рендере (кстати, вы не указали в решении атрибут value у инпута, чтобы сделать его контролируемым).

setState выполняется асинхронно. Что это значит: при перерисовке значение стейта будет актуально (ведь изменение стейта приводит к перерисовке), а внутри функции, в которой вызывается setState - нет. Относитесь к setState скорее как к запросу на изменение, чем к команде, исполняемой немедленно и синхронно.