再レンダリング時にcomponentDidMountが呼び出されないのはなぜですか？

Question

私は登録に問題があるため、複数のモーダルを持っています。私には合計で3つの行動があります。最初に登録ボタンを押すと、GoogleまたはFacebookにサインアップするために最初の登録モードが起動され、その後、プロバイダーによって収集されなかった追加情報のモーダルが完了し、フォームプロバイダーに収集された入力が事前入力されます。私はアプリケーションをレンダリングするときに2つのモーダルをレンダリングし、登録ボタンがクリックされたときにのみそれを表示します。私はfacebookまたはGoogleログインを完了した後に呼び出されるcomponentDidMountが必要ですが、アプリケーションの起動時にモーダルをレンダリングしたときに呼び出されました。ボタンはモーダルを表示するかどうかを判断するために、アクションリデューサとリデューサをヒットします。

class HeaderRegisterButton extends Component { 
    render() { 
    return(
     <div> 
     <Register1/> 
     <Register2/> 
     </div> 
    ); 
    } 
} 

登録モーダル1

class Register1 extends Component { 
    render() { 
    return(
     <div> 
     <button onClick={() => this.props.showRegister2()} /> //This would hit the action reducer to get initial info and change the bool to show register 1 to false and register 2 to true. 
     </div> 
    ); 
    } 
} 

登録モーダル2

import { reduxForm, Field, initialize } from 'redux-form'; 

class Register2 extends Component { 

    componentDidMount() { 
    hInitalize() //only called when the app fires, not when the state changes in the action reducer to change bool to show this modal. 
    } 

    hInitalize() { 
    var initData = {}; 
    const initData = { 
    "name" = this.props.name//name stored inside redux store 
    }; 
    this.props.initialize(initData) 
    } 



    render() { 
    return(
     <div> 
     //Code to display the modal which works. 
     </div> 
    ); 
    } 
} 

Answer 1

componentDidMountは唯一のコンポーネントを再初期化しません再レンダリング、任意のコンポーネントのライフサイクルに一度と呼ばれています。ロジックを管理できる場所はcomponentDidUpdateと呼ばれます。

Answer 2

IMOあなたはcomponentDidMountを呼び出す必要はありません。プロセス中に必要な/収集されたすべての情報の一時的な状態を保持するいくつかのコールバックを親コンポーネントに提供するだけです。それぞれのモーダルは、この親コンポーネントによって与えられた情報を表示します。

このプロセスは次のようなものになります。

1. 登録ボタンは、ユーザーがGoogleやFacebook
2. は、ソーシャルメディアのアカウントを経由して一時的に保存されるように親コンポーネントに送り返された認証から
3. データの認証を実行するクリック数
GoogleとFacebookの間
5. 表示の選択]をクリックしました
6. 二次登録フォームは、親コンポーネントから与えられたデータで表示されます
7. 使用rは二次のフォームに記入
8. 送信ボタンを理にかなっているアクション

ホープ親コンポーネントの一時的な状態から

使用データ:)

UPDATEクリック：

さて、私ドン」にあなたの実装がどのようになっているかを知っていますが、（子プロセスを介して）子コンポーネントに関数を渡して子プロセスで関数を渡すことができます。したがって、Facebook認証を行うコンポーネントでは、someCallbackは、以下に示すパラメータを受け入れ、それらを親状態に追加します（状態が変化すると、その状態を使用するコンポーネントは更新されます）。私は、実際のボタンや他のいくつかの小さなものののレンダリングを削除したが、それはより多くの、またはどのように以下のFacebookのFB.getLoginStatus(....)

export class FbLoginButton extends Component { 
    constructor(props) { 
     super(props); 
    } 
    fbLoginCallback = response => { 
     const { authResponse, status } = response; 
     if (status === 'connected') { 
      // Logged into your app and Facebook. 
      const userId = authResponse.userID; 
      const accessToken = authResponse.accessToken; 

      FB.api('/me', user => { 
       const displayName = user.name; 

       this.props.someCallback(userId, accessToken, displayName); 
      }); 
     } 
    } 
} 

を呼び出して、私のFacebookのログインプロセスのためのコールバックとしてfbLoginCallbackを渡すことでこれを行ってきましたコールバックが行われます。