Как вызвать "componentDidMount" или эквивалентный при каждом изменении маршрута? - PullRequest
0 голосов
/ 13 апреля 2019

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

есть ли способ сделать это?

может публиковать код при необходимости, но я просто хочу знать, как вызывать что-то при каждом изменении маршрута, как исторически я использовал бы componentDidMount

это для реакции нативного navigation кстати, как я знаю, этот способ работает в обычном React

Ответы [ 2 ]

0 голосов
/ 14 апреля 2019

У меня недавно была похожая проблема. В моем случае, я думаю, что проблема в основном сводилась к монтажу компонентов с помощью стековой навигации React Native. componentDidMount будет вызываться только один раз, пока вы находитесь в стеке, и не будет перерисовываться, пока вы не покинете стек и не вернетесь к нему. Я изложил способ решения проблемы ниже:

 /** 
  * @issue page does not refresh if its already been mounted on the navigation stack
  * @todo  listen to navigation events, and trigger refresh
  * @todo  get rid of componentDidMount, and instead 
  *        have the navigation event handler trigger the refresh

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

navigate('ExamplePage', { example: '<new Example>' })}

и ExamplePage

componentWillReceiveProps(nextProps) {
  if (nextProps.navigation.state.params.example) {
    this.props.retrieveData(this.props.example);
  }
}

EDIT / UPDATE В качестве другого варианта и, на мой взгляд, гораздо лучшего решения, вы можете прослушать NavigationEvents. Вот документация, хотя это не очень подробно https://reactnavigation.org/docs/en/navigation-events.html

Так что в моем случае я все равно слушал бы параметры навигации, переданные с navigate на предыдущем экране. Затем, добавив этот код ниже, я добавляю свою функцию обновления в onDidFocus, которая будет запускаться каждый раз, когда страница появляется на экране.

import {NavigationEvents} from 'react-navigation';

   render() {
     return (
       ...
       <NavigationEvents onDidFocus={() => this._refresh()} />
       ...
     )
   }

С этим решением вы также можете первоначально позвонить componentDidMount(). И вам не нужно использовать componentWillReceiveProps, поскольку это плохая практика

0 голосов
/ 13 апреля 2019

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

Документацию о том, как подписаться, можно найти в справочном руководстве по реагирующей навигации:

...