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

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

уже несколько упражнений я сталкиваюсь с одной проблемой - непонятен порядок изменения стейта и отображения нового контента, т.е. я изменил стейт, но новый контент отображает то, что было в стейте в прошлый раз. Подскажите какие правила есть для такого? (если я понятно объяснил). Я посмотрел в готовый ответ и вроде почти все как у меня, но работает в нужном порядке. https://ru.hexlet.io/code_reviews/424407. Подскажите мне, что у меня не так плиз

5 0

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, в которую записано примитивное значение?

0

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

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

0

Roman Makarov

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

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

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

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

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

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

0

Roman Makarov

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

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

2

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
25 мая 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
25 мая 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
25 мая 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
25 мая 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
25 мая 5 месяцев