React路由器在哪裏使用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路由器。

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