React - 在道具變化上調用函數

Question

我的TranslationDetail組件在打開時傳遞一個id，並且基於此，在類構造函數中觸發外部api調用，將數據接收到狀態，並將此數據顯示在TranslationDetail上。

//Routing: 
<Route path="/translation/:id" component={TranslationDetail}/> 

//Class:  
class TranslationDetail extends Component { 
    constructor(props){ 
    super(props); 

    this.props.fetchTrans(this.props.params.id); 
    } 

這一切工作正常，如果我手動輸入網址。如果我想使用反應路由器，例如爲了顯示下面的項目，url不會改變，但api調用不會被觸發，並且數據將保持不變。

<button 
    type="button" 
    onClick={() => 
    browserHistory.push(`/translation/${Number(this.props.params.id)+1}`)}> 
    Next 
</button> 

請注意，我是一個初學者。發生這種情況的原因是我相信構造函數只運行一次，因此不會觸發進一步的api調用。

我該如何解決這個問題？ 我是否需要列出道具並在變更時調用函數？如果是，如何？

Answer 1

構造函數不適合進行API調用。

您需要使用的生命週期事件

• componentDidMount - 運行初始獲取
• componentWillReceiveProps - 使後續調用

Answer 2

我會使用的渲染方法。如果數據未加載，我會呈現加載器微調器並拋出取數據的操作。爲此我通常使用商店。一旦商店從api獲取數據，將數據標記爲已加載，並拋出一個事件並讓組件從商店獲取數據，用數據表示替換裝載器微調器。

Answer 3

使用componentWillMount獲取數據並設置狀態。 然後使用componentWillReceiveProps獲取道具上的更新。您可以檢查Component Specs and Lifecycle。