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行いますlは

これが二度目IE用です

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 

上記のログでは、2回目にline number 197 221 210 executed twice with the errorが解決できないことがわかりました

私が使用している

は、私はまた、リリースバージョンでチェックroute

ためnavigatorを反応させるが、それは1 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); 
}