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 最终解决了问题。

文档中列出了两种解决方案：

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