componentDidUpdate wird nach der Seitennavigation weiterhin ausgeführt.

Question

Ich verwende React-Native, React-Navigation und Redux. Ich habe eine Anmeldeseite, die die Benutzerinformationen an den Server sendet und auf ein Token wartet. Sobald das Token empfangen wird, ändere ich den globalen Status {userLoggedIn: true}.

In meiner Komponente verwende ich ein ComponentDidUpdate, um zu überprüfen, ob userLoggedIn wahr ist, und wenn dies der Fall ist, werde ich auf die Seite "Main" umleiten.

// component/register 
class Register extends Component { 
    ... 
    componentDidUpdate(){ 
    console.log('componentDidUpdate from the register page') 
    if (this.props.people.userLoggedIn==true){ 
     this.props.navigation.navigate('Main'); 
    } 
    } 

    render(){ 
    //sign up form 
    } 
} 

... 
export default connect(mapStateToProps, mapDispatchToProps)(Register); 

Dies funktioniert gut, da ich auf die Hauptseite weitergeleitet werde. Aber auf der Hauptseite selbst ist es erfrischend non-stop. Ich überprüfte das Protokoll und sah, dass componentDidUpdate noch von der Registrierungsseite aufgerufen wird.

Daher bin ich ein wenig verwirrt, warum componentDidUpdate immer noch aufgerufen wird? Würde es nicht aufhören zu überprüfen, nachdem es zu einer neuen Seite navigiert wurde?

EDIT 1: Ich erkannte, dass es kein Problem mit ComponentDidUpdate ist. Ich habe die Redirect-Bedingung innerhalb der Render-Methode eingefügt, es verursacht auch eine Endlosschleife. Ich kann nicht verstehen, warum es immer noch versucht zu rendern, wenn es zu einer neuen Seite navigiert wird.

Answer 1

Es sieht so aus, als ob Ihre Anmeldeseite neue Props und Updates erhält, nachdem Sie zur Hauptseite navigiert sind. Ich denke, das liegt an navigation Prop, die aktualisiert wird. In Ihrem componentDidUpdate sollten Sie sicherstellen, dass Sie die Seite nur in einem Fall wechseln werden - wenn Ihr userLoggedIn von false zu true geändert wird.