反應母語componentDidMount從服務器

Question

constructor(props) { 
    super(props); 
    console.log("props"); 
    this.state={ 
     userId : "12345", 

    } 
} 
componentDidMount() { 
    console.log("componentDidMount") 
    Actions.getProductDetails({userId:"123456"}); 

Actions.getProductDetails.completed.listen(this.gotProductDetails.bind(this));   


Actions.cancelOrder.completed.listen(this.cancelOrderCompleted.bind(this));  
    } 
    gotProductDetails(data){ 
     console.log("gotProductDetails")  
    } 
    goBack(data){ 
     console.log("justgoback") 
     this.props.back() 
    } 
    cancelProduct(){ 
     console.log("SDsadsadsad"); 
     Actions.cancelOrder({ 
      orderId:this.state.order.id, 
      canelMsg:this.state.selectedReason, 
      userId:this.state.userId}) 
    } 
    cancelOrderCompleted(data) { 
     console.log("cancelOrderCompleted") 
     this.goBack() 
    } 

我的問題是，某些功能已安裝兩次取每當我改變 路線，再次重溫這條路我會告訴你這裏CONSOLE.LOG

這是我第一次來到這條路線：

props 
cancelOrder.js:190 componentDidMount 
cancelOrder.js:197 gotProductDetails 

現在我會做cancelProduct調用和日誌WIL L爲

SDsadsadsad 
cancelOrder.js:221 cancelOrderCompleted 
cancelOrder.js:210 justgoback 

這是第二次，即，我將從這條路線回去重溫：

props 
cancelOrder.js:190 componentDidMount 
cancelOrder.js:197 gotProductDetails 
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the cancelOrder component. 
cancelOrder.js:197 gotProductDetails 

現在我會做cancelProduct打電話日誌將

SDsadsadsad 
cancelOrder.js:221 cancelOrderCompleted 
cancelOrder.js:210 justgoback 
cancelOrder.js:221 cancelOrderCompleted 
cancelOrder.js:210 justgoback 

在上面的日誌中，您可以看到第二次line number 197 221 210 executed twice with the error我無法解決

我使用反應navigator爲route

我在發行版也檢查，但它是有同樣的錯誤，它是在一個Github問題告知，但不是現在能夠找到的。

Answer 1

運行此行每次

Actions.cancelOrder.completed.listen(this.cancelOrderCompleted.bind(this)); 

的listen方法每次運行時獲得一個新的功能，例如，因此，如果這個頁面是在應用程序的生命週期中安裝了兩次，cancelOrderCompleted將運行兩次，一他們可能在一個未安裝的組件中，這是不好的。

一般我會建議你的getProductDetails會返回一個Promise。如果您不想這樣做，請確保在卸載組件時刪除監聽器。

而且請注意，cancelOrderCompleted.bind(this)會創建一個新的代理實例，在停止偵聽器時無法重新創建它。除非你保存在數據成員中。

編輯：

代碼示例 -

constructor(props) { 
    super(props); 
    console.log("props"); 
    this.state={ 
     userId : "12345", 
    } 

    this.getProductDetailsBound = this.gotProductDetails.bind(this); 
    this.cancelOrderCompletedBound = this.cancelOrderCompleted.bind(this); 
} 
componentDidMount() { 
    console.log("componentDidMount") 

    // Listen before you call getProductDetails, not after 
    Actions.getProductDetails.completed.listen(this.getProductDetailsBound);   
    Actions.cancelOrder.completed.listen(this.cancelOrderCompletedBound); 

    Actions.getProductDetails({userId:"123456"}); 
} 

componentWillUnmount() { 
    Actions.getProductDetails.completed.stopListening(this.getProductDetailsBound);   
    Actions.cancelOrder.completed.stopListening(this.cancelOrderCompletedBound); 
}