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

Question

Мой компонент 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 не запускается.

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

Answer 1

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

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

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

Answer 2

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

Answer 3

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

Вы можете проверить Component Specs and Lifecycle.