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

Работа с асинхронным кодом в 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 не будет его больше трогать.

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

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