componentDidUpdateはページナビゲーションのあとも実行され続けます

Question

私はReact-Native、React-NavigationおよびReduxを使用しています。私はユーザー情報をサーバーに送信し、トークンを聞くサインアップページを持っています。トークンが受信されると、グローバル状態{userLoggedIn：true}が変更されます。

私のコンポーネントでは、componentDidUpdateを使用してuserLoggedInがtrueであるかどうかを確認し、そうであれば私は「メイン」ページにリダイレクトします。

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

これは、メインページにリダイレクトされているため、正常に動作します。しかし、メインページ自体では、それはノンストップでさわやかです。私はログをチェックし、componentDidUpdateがまだ登録ページから呼び出されているのを見ました。

したがって、なぜcomponentDidUpdateがまだ呼び出されているのか少し混乱していますか？新しいページに移動した後にチェックを止めないのですか？

EDIT 1：componentDidUpdateに問題がないことを認識しました。レンダリングメソッド内部にリダイレクト条件を挿入しましたが、無限ループも発生します。新しいページに移動したときにレンダリングしようとしている理由を理解できません。

Answer 1

SignUpページでは、メインページに移動した後に新しい小道具や更新情報が表示されるようです。私はこれが更新されたnavigation小道具のためだと思います。 componentDidUpdateでは、userLoggedInがfalseからtrueに変更された場合にのみ、ページを変更することを確認する必要があります。

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

    render(){ 
    //sign up form 
    } 
}