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