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

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

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

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

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

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

Ответы

Ответ 1

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

В документе предусмотрено два решения:

  • Используйте addHandlerKey={true}:

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

  • Используйте 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})
    })
  }
}