Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Асинхронная обработка

Работа с асинхронным кодом в React не отличается ничем особо примечательным по сравнению с тем, что мы уже проходили, но для проформы стоит пробежаться.

class Loader extends React.Component {
  constructor(props) {
    super(props);
    this.state = { url: null };
  }

  handleClick = async () => {
    const res = await axios.get('/images/random');
    this.setState({ url: res.data });
  }

  render() {
    const { url } = this.state;
    return (
      <div>
        <button onClick={this.handleClick}>Load Random Image</button>
        {url && <img src={url} />}
      </div>
    );
  }
}

Выше видно, что мы легко можем делать обработчик асинхронным, а дальше все как обычно.

Единственный момент, выделяющий React - это обработка событий в асинхронном коде. Как я уже упоминал, объект события в React постоянно переиспользуется. Попытка работать с ним в асинхронном коде к хорошему не приведёт:

onClick = (event) => {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // "click"

  setTimeout(() => {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  // Не сработает. this.state.clickEvent будет содержать только null-значения.
  this.setState({ clickEvent: event });

  // Но по-прежнему можно экспортировать свойства события.
  this.setState({ eventType: event.type });
}

Выходов из этой ситуации два: предпочтительный - взять из объекта события только то, что нужно, и использовать это. Другое решение - вызывать event.persist(), тогда React не будет его больше трогать.


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Для полного доступа к курсу нужна профессиональная подписка

Профессиональная подписка откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, даст возможность обращаться за помощью к менторам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

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

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

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

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