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 个解决方案：

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

React Router 在哪里使用 AJAX

React Router where to use AJAX

javascript

ajax

reactjs

react-router