React Router где использовать AJAX

Question

Я работаю над проектом с использованием React Router, и у меня возникают некоторые проблемы с потоком данных.

На каждой странице есть вызов AJAX, который получает данные для компонента. Я помещал их в componentDidMount:

// Below code is written in ES6 
componentDidMount(){ 
    $.get(someURL, (data)=>{ 
    this.setState({data:data}) 
    }) 
} 

Хотя это работает на начальной загрузке, он не дозвонился еще раз, когда изменения URL (ручное обновление не требуется). Кажется, я не нашел подходящего life cycle, чтобы разместить вызовы AJAX.

Кто-нибудь, пожалуйста, просветите меня с правильным подходом к получению данных в React Router.

Answer 1

После небольшого поиска, this README в конечном итоге решает проблему.

Есть 2 решения, изложенные в документе:

1. addHandlerKey={true} Использование:

   <Route handler={User} path="/user/:userId" addHandlerKey={true} />

2. Используйте componentWillReceiveProps вместо componentDidMount.

   • Я закончил с использованием обоих componentDidMount для начальной загрузки, componentWillReceiveProps для последующих.
   • Поскольку они имеют один и тот же код, я создал новую функцию _updateState и назвал ее в обоих жизненных циклах.

---

Мой код прямо сейчас:

class Classes extends React.Component { 
    componentDidMount(){ this._updateState() } 
    componentWillReceiveProps(){ this._updateState() } 
    _updateState(){ 
    $.get(/*Some URL*/, (data)=>{ 
     this.setState({data:data}) 
    }) 
    } 
}