reagieren-native componentDidMount von Server Montage

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

Mein Problem wird einige Funktionen zweimal zu holen, wenn ich die Route zu ändern und diese Route erneut wieder würde ich Ihnen hier zeigen console.log

Dies ist für das erste Mal, dass ich auf dieser Strecke kommen:

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

Jetzt tun cancelProduct ich nenne und wil einloggen l werden

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

Diese für die zweite Zeit ist also werde ich auf dieser Strecke zurück und überdenken:

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 

Jetzt werde ich tun cancelProduct anrufen und log werden

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

In dem obigen Protokoll können Sie sehen, dass zum zweiten Mal line number 197 221 210 executed twice with the error ich

nicht lösen konnte

Ich verwende reagieren navigator für route

ich in Release-Version auch überprüft, aber es ist die gleichen Fehler mit ihm in einer Github Frage gesagt wurde, war aber nicht in der Lage jetzt zu finden.

Answer 1

Jedesmal, wenn Sie diese Zeile laufen

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

Die listen Methode erhält eine neue Funktion Instanz jedes Mal, es läuft, so dass, wenn Sie diese Seite zweimal im Lebenszyklus des App montiert wurde, die cancelOrderCompleted laufen würde zweimal und einer der sie wahrscheinlich in einer unmontierten Komponente, die schlecht ist.

Generell würde ich empfehlen, dass Ihre getProductDetails eine Promise zurückgeben würde. Stellen Sie sicher, dass Sie die Listener entfernen, wenn Ihre Komponente deaktiviert ist, wenn Sie das nicht möchten.

Und beachten Sie, dass cancelOrderCompleted.bind(this) eine neue Delegat-Instanz erstellt, die Sie nicht neu erstellen können, wenn Sie den Listener stoppen. Es sei denn, Sie speichern es in einem Datenelement.

Edit:

Codebeispiel -

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