React ändert sich nicht in LoggedInView, wenn sich der Meteor-Benutzer anmeldet

Question

Ich entwickle eine React + Meteor-Anwendung und habe Probleme mit der Benutzeranmeldungsfunktion.

Ich habe einen Header navbar, die eine andere Komponente zeigt, basierend auf, ob der Benutzer angemeldet ist

wie folgt aus:.

export default class Header extends Component { 
    constructor(props) { 
     super(props) 

     this.state = { 
      user: Meteor.user() 
     } 
    } 

    render() { 
     return (
      <header className="main-header"> 
       <nav className="navbar navbar-static-top"> 
        <div className="navbar-custom-menu"> 
         {this.state.user() !== null ? <LoggedInNavigation /> : <LoggedOutNavigation />} 
        </div> 
       </nav> 
      </header> 
     ) 
    } 
} 

Nun ist diese funktioniert, aber es ändert sich nicht auf ein Benutzer wird angemeldet. Ich muss die Seite aktualisieren, um die Ansichten zu ändern (was offensichtlich nicht ideal ist).

Hier ist meine Login-Code:

Meteor.loginWithPassword(this.state.email, this.state.password, (error) => { 
    if (error) 
     this.setState({ meteorError: "Error: " + error.reason }) 
    else { 
     this.setState({ meteorError: "" }) 
     // Handle successful login 
    } 
}) 

Das Problem ist, diese beiden Code-Blöcke in verschiedenen Komponenten sitzen. Der erste Block ist in imports/ui/components/main-layout/Header und der zweite Block ist in imports/ui/components/authentication/Login.

Wie gesagt, das Problem ist, dass der Benutzer sich anmelden kann, aber die Ansicht ändert sich nicht entsprechend dem Authentifizierungsstatus. Was ist die beste Vorgehensweise, um dies zu lösen?

EDIT:

Hier ist die Hierarchie der Komponenten:

1 - LoggedOutNav

MainLayout -> Header -> LoggedOutNav 

2 - Login-Code

MainLayout -> Routes -> (Route path="/login" component={Login}) -> LoginForm 

Answer 1

Das Problem hier ist, dass die Konstruktor der Klasse wird nur ausgeführt einmal und nie wieder, solange die Komponente montiert ist. Auch wenn Meteor.user() wird sich ändern, wird Ihre state nicht. Die Komponente wird neu gerendert, wenn a) die props Änderung oder b) Ihre state Änderungen z. wenn Sie setState anrufen. Wir können a) durch Meteore createContainer HOC (react-meteor-data), um Ihre Header Klasse zu hebeln und einen reaktiven Datenkontext dafür einstellen. Wenn sich die Daten ändern, ändern sich die Requisiten für Header und die Komponente wird neu gerendert. In Code, der so etwas wie sein würde:

import { Meteor } from 'meteor/meteor'; 
import { createContainer } from 'meteor/react-meteor-data'; 
import React, { Component, PropTypes } from 'react'; 

class HeaderComponent extends Component { 
    render() { 
     const { user } = this.props; 
     return (
      <header className="main-header"> 
       <nav className="navbar navbar-static-top"> 
        <div className="navbar-custom-menu"> 
         {user ? <LoggedInNavigation /> : <LoggedOutNavigation />} 
        </div> 
       </nav> 
      </header> 
     ) 
    } 
} 

export const Header = createContainer(() => { 
    // assuming you have a user publication of that name... 
    Meteor.subscribe('users/personalData'); 
    return { 
     user: Meteor.user(), 
    }; 
}, HeaderComponent);