React Router在哪里使用AJAX

Question

我正在使用React Router进行项目,我遇到了一些数据流问题.

在每个页面上都有一个AJAX调用,用于获取组件的数据.我一直把它们放进去componentDidMount:

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

虽然这适用于初始加载,但在URL更改时不会再次调用(需要手动刷新).我似乎无法找到适当的生命周期来放置AJAX调用.

有人请用正确的方法来启发我在React Router中获取数据.

Answer 1

经过一番搜索后,本自述文件最终解决了这个问题.

该文件中概述了两种解决方案:

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})
    })
  }
}