Прервать предыдущий запущенный асинхронный componentDidMount - PullRequest
Новая
       10

Прервать предыдущий запущенный асинхронный componentDidMount

1 голос
/ 18 марта 2019

У нас есть компонент, подключенный к хранилищу резервов, который имеет определение componentDidMount: 

async componentDidMount() {
  const page = await fetchPage(this.props.page);
  const section = await fetchSection(this.props.section);

  this.props.saveDataToStore({ page, section });
}

Итак, каждый раз, когда компонент монтируется, он запускает этот код.

Теперь давайте представим, что мы переходим в другой раздел нашего приложения, поэтому компонент отключается, а затем мы возвращаемся до того, как предыдущий componentDidMount завершил свое выполнение, снова подключил компонент и начал извлекать новые данные.Каждый раз, когда данные извлекаются, мы сохраняем их в хранилище избыточных данных.

Я думаю, что нет способа прервать предыдущее выполнение componentDidMount, чтобы предотвратить установку старых данных из предыдущих вызовов.Итак, мой вопрос: каков наилучший подход для предотвращения установки старых данных?

Мне удалось решить эту проблему с помощью функции, которая выполняет все эти вызовы (например, fetchData), которая обрабатываетAbortController объект, но я нашел его немного многословным, так вы знаете, какой рекомендуемый подход следует использовать в этой ситуации?

1 Ответ

3 голосов
/ 18 марта 2019

Использование AbortController или такой библиотеки, как axios, которая поддерживает отменяемые запросы, является хорошим решением, но вы также можете сохранить переменную экземпляра, которую вы измените на false, когда компонент размонтируется, и проверить его перед использованием. setState после завершения запросов.

Пример 

class App extends React.Component {
  _isMounted = true;

  async componentDidMount() {
    const page = await fetchPage(this.props.page);
    const section = await fetchSection(this.props.section);

    if (this._isMounted) {
      this.setState({ page, section });
    }
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    // ...
  }
}
...