React - функция вызова при изменении реквизита

Мой компонент TranslationDetail передается id при открытии, и на основании этого внешний вызов api запускается в конструкторе класса, принимает данные в состояние и эти данные отображаются на TranslationDetail.

//Routing:
<Route path="/translation/:id" component={TranslationDetail}/>

//Class:    
class TranslationDetail extends Component {
  constructor(props){
    super(props);

    this.props.fetchTrans(this.props.params.id);
  }

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

<button 
  type="button"
  onClick={() => 
    browserHistory.push(`/translation/${Number(this.props.params.id)+1}`)}>
  Next
</button>

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

Как я могу это решить? Нужно ли мне перечислить в реквизиты и вызвать функцию при изменении? Если да, то как?

Ответ 1

Конструктор не является подходящим местом для вызова API.

Вам нужно использовать события жизненного цикла

componentDidMount - запустить начальную выборку
componentWillReceiveProps - для последующего вызова

Ответ 2

Используйте componentWillMount для получения данных и установки состояния. Затем используйте componentWillReceiveProps для захвата обновлений на реквизитах.

Вы можете проверить Компонентные характеристики и жизненный цикл.

Ответ 3

Я бы использовал метод рендеринга. Если данные не загружены, я бы сделал развертку загрузчика и выбросил действие, которое извлекает данные. Для этого я обычно использую магазины. После того, как в хранилище будут введены данные из api, отметьте данные как загруженные, отбросьте событие и позвольте компоненту получить данные из хранилища, заменив счетчик загрузчика вашим представлением данных.