Запуск api fetch при входе в экран

Question

Я создаю приложение в React Native (создать реагировать нативно) и пытаюсь получать данные из API каждый раз, когда пользователь переходит на экран.

Для навигации я использую библиотеку React Navigation с комбинацией Навигаторов Draw и Stack.

Как правило, я видел выборку, обрабатываемую через жизненный цикл ComponentDidMount ().Однако при переходе к экрану в стековом навигаторе жизненный цикл ComponentDidMount () не запускается и выборка не запускается.

Пример.Пользователь попадает в индекс постов, затем перемещается, чтобы добавить экран постов, отправляет и перенаправляется на экран просмотра (для этого поста), затем нажимает назад, чтобы вернуться к индексу.Возврат к индексу не вызывает ComponentDidMount () и выборка не запускается снова, поэтому результаты не обновляются.

Кроме того, иногда мне требуется доступ к параметрам навигации, чтобы изменить запрос выборки при переходе между экранами.

Первоначально я пытался определить переход экрана (когда были переданы параметры навигации) с помощью метода componentWillReceiveProps(), однако это казалось немного ненадежным.

Я сделал больше чтения, и это звучит так, как будто я должен бытьподписка на слушателей (через реагирующую навигацию).Мне трудно найти последние примеры.

Текущий процесс (пример)

На нужном экране я бы подписался на слушателей) в методе componentDidMount ():

  async componentDidMount() {
    this.subs = [this.props.navigation.addListener('willFocus', payload => this.setup(payload))];
  }

Исходя из примера, неплохо было бы удалять все подпрограммы при размонтировании экрана, поэтому я также добавляю:

componentWillUnmount() {
    this.subs.forEach((sub) => {
      sub.remove();
    });
  }

затем я добавляю метод обратного вызова setup (), который вызывает любые методы выборки, которые мне требуются:

setup = (payload) => {
    this.getExampleDataFromApi();
  };

Кроме того, иногда мне требуется доступ к параметрам навигации, которые будут использоваться в запросах API.

Я устанавливаю эти параметры с помощью методов на других экранах, например так:

  goToProfile = (id) => {
    this.props.navigation.navigate('Profile', {
      exampleParam: 'some value',
    });
  };

Кажется, что я не могу получить доступ к навигационной информации с помощью предоставленного метода getParam(), когда в методе обратного вызова изслушатель навигации.

Например, это возвращает неопределенное значение.

setup = (payload) => {
    console.log(navigation.getParam('exampleParam', []));
  };

Вместо этого мне нужно сделать

componentDidFocus = (payload) => {
    console.log(payload.action.params.exampleParam);
  };

Вопрос

Я хотел бы спросить, кажется ли мне подходящим мой подход к обработке выборки при навигации, и если нет, то как лучше подходить к обработке запросов API при переходе между экранами?

Спасибо, я очень ценю помощь!