Meteorユーザーのログイン時にRegedがLoggedInViewに変更されない

Question

React + Meteorアプリケーションを開発中で、ユーザーのログイン機能に問題があります。

は、私は、ユーザーがログインしているかどうかに基づいて異なるコンポーネントを表示するヘッダーナビゲーションバーを持ってこのよう

：。

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> 
     ) 
    } 
} 

さて、これは動作しますが、それは時に変更されません。私はビューを変更するためにページをリフレッシュする必要があります（明らかに理想的ではありません）。ここで

は私のログインコードです：

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

問題は、コードのこれら2つのブロックが異なるコンポーネントに座っています。

最初のブロックはimports/ui/components/main-layout/Headerで、2番目のブロックはimports/ui/components/authentication/Loginです。

私が言ったように、問題はユーザーがログインできるが、認証状態に応じてビューが変わらないということです。これを解決するベストプラクティスは何ですか？

編集：ここでは

は、コンポーネントの階層です：

1 - LoggedOutNav

MainLayout -> Header -> LoggedOutNav 

2 - ここで問題があることであるコード

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

Answer 1

ログインあなたのクラスのコンストラクタは実行されますコンポーネントがマウントされている限り、一度だけ、そして決して再びありません。したがってMeteor.user()が変更されても、stateは変更されません。 a）propsが変更された場合、またはb）stateが変更された場合、コンポーネントは再レンダリングされます。 setStateに電話をしたとき。流星createContainerのHOC（react-meteor-data）を使用してHeaderクラスをラップし、それに対して反応的なデータコンテキストを設定することで、a）を活用することができます。データが変更されると、Headerの小道具が変更され、コンポーネントが再表示されます。ビューが原因**が呼び出されるレンダリングは変更されません状態は、それが再レンダリングする場合は順番に変更することがあるため、機能しません

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