Warum wird ComponentDidMount beim Rendern nicht aufgerufen?

Question

Ich habe mehrere Mods für die Anmeldung und Probleme damit. Ich habe insgesamt drei Aktionen. Zuerst der Register-Button, der dann das erste Modal-Register aktiviert, um sich entweder mit Google oder Facebook anzumelden, dann wird das Modal für zusätzliche Informationen vervollständigt, die vom Provider nicht erfasst werden konnten, mit vorgefüllten Eingaben, die vom Provider gesammelt wurden. Ich rendere die beiden Modale, wenn ich die Anwendung rendere und sie nur zeige, wenn die Register-Taste geklickt wird. Ich brauche den componentDidMount, der aufgerufen wird, nachdem ich die Facebook- oder Google-Anmeldung abgeschlossen habe, aber er wurde aufgerufen, als ich die Modale gerendert habe, als die App-Faust gestartet wurde. Die Tasten drücken Aktionsreduzierer und Reduzierer, die den Status von Typ bool ändern, um das Modal anzuzeigen oder nicht.

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

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

Register Modal 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 wird nur einmal im Lebenszyklus eines Bauteils genannt, neu rendern wird die Komponente nicht neu initialisiert werden. componentDidUpdate wird aufgerufen, wo Sie Ihre Logik verwalten können.

Answer 2

IMO Sie müssen nicht componentDidMount aufgerufen werden, bieten Sie einfach einige Rückrufe zu einer übergeordneten Komponente, die einen temporären Zustand aller Informationen enthält, die während des Prozesses benötigt/gesammelt werden. Jedes deiner Mods zeigt Informationen an, die ihnen von dieser übergeordneten Komponente gegeben wurden.

Der Prozess wäre in etwa so.

1. Register Geklickt
2. Anzeigen Auswahl zwischen Google und Facebook
3. Benutzer klickt auf Google oder Facebook
4. Authentifizierung durchführen via Social Media Konto
5. Daten aus Authentifizierung zurück zur übergeordneten Komponente gesendet vorübergehend gespeichert werden
6. Sekundäres Registrierungsformular wird mit den Daten angezeigt, die ihm von der übergeordneten Komponente
7. zugewiesen wurden r füllt sekundäre Form
8. Submit-Button
9. Verwenden von Daten aus temporären Zustand in Stammkomponente

Hoffnung für Aktionen angeklickt, die Sinn :)

UPDATE macht:

Nun, ich don‘ Sie wissen, wie Ihre Implementierung ist ... aber Sie können Funktionen in untergeordnete Komponenten (über Requisiten) weitergeben und sie im untergeordneten Element verwenden, um mit dem übergeordneten Element zu kommunizieren. In der Komponente mit der Facebook-Authentifizierung muss das übergeordnete Elementübergeben werdenakzeptiert die unten gezeigten Parameter und fügt sie dem übergeordneten Status hinzu (denken Sie daran, dass eine Änderung des Status dazu führt, dass alle Komponenten, die diesen Status verwenden, aktualisiert werden).Ich habe dies getan, indem fbLoginCallback als Callback für meine Facebook Login-Prozess vorbei, die die Anrufe 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); 
      }); 
     } 
    } 
} 

Ich habe das Rendering von der der tatsächlichen Taste und einige andere kleine Dinge entfernt, aber das ist mehr oder weniger wie Der Rückruf sollte gehen.