currentUserは未定義です

Question

私がサインアップすると、Navbarコンポーネントを持つ/ダッシュボードページにリダイレクトされます。 ReactMeteorDataWrap.jsxで定義されているReactMeteorDataにリンクされています。サインアップした後、コンソール上でObject {_id： "qW8wQcc2sjiM8TXcc"、profile：Object、emails：Array [1]}データオブジェクト{currentUser：Object}を取得します。ただし、currentUserはnullと表示されます。ユーザーがサインアップした後

私のコード

ReactMeteorDataWrap.jsx

const ReactMeteorDataWrap = (BaseComponent)=>{ 
    return class ExportClass extends Component { 
     getMeteorData(){ 
      let data = {}; 
      console.log(Meteor.user()); 
      data.currentUser = Meteor.user(); 
      console.log('data',data); 
      return data; 
     } 
     render(){ 
      return <BaseComponent getMeteor={()=>this.getMeteorData()} 
       {...this.props}></BaseComponent> 
     } 
    } 
} 

export default ReactMeteorDataWrap; 

Navbar.jsx（/ダッシュボード）

import ReactMeteorDataWrap from '../ReactMeteorDataWrap.jsx'; 

    class Navbar extends Component { 
     constructor(props){ 
      super(props); 
      this.state = { searchText: '' }; 
      this.props.getMeteor(); //accessed from ReactMeteorDataWrap 
     } 

     componentDidMount(){ 
      const users = Meteor.users.find({},{fields:{'profile':1}}).fetch(); 
      const usernames = []; 
      users.map(function(user){ 
       usernames.push(user.profile.fullname); 
      }); 
      $('#typeahead').typeahead({ 
       name: 'users', 
       local: usernames 
      }); 
     } 

     handleSubmit(e){ 
      e.preventDefault(); 
      FlowRouter.go('/user/' + (this.refs.searchText.value).trim()); 
     } 

     render() { 
      let fullname = ''; 
      let currentUser = this.props.currentUser; 
      console.log('currentUser',this.props.currentUser); // returns undefined 
      if(currentUser && currentUser.profile){ 
       console.log('currentUser',currentUser); 
       fullname = currentUser.profile.firstname + ' ' + currentUser.profile.lastname; 
      } 
      console.log('fullname',fullname); // returns null 
      return (
         <div className="navbar navbar-blue navbar-fixed-top"> 
          <div className="navbar-header"> 
           <a href="/dashboard" className="navbar-brand logo"><i className="fa fa-facebook"></i></a> 
          </div> 
          <nav className="collapse navbar-collapse" role="navigation"> 
           <ul className="nav navbar-nav"> 
            <li> 
             <a href="/dashboard"><i className="fa fa-home"></i> News Feed</a> 
            </li> 
           </ul> 
           <ul className="nav navbar-nav navbar-right"> 
            <li className="dropdown"> 
             <a href="#" className="dropdown-toggle" data-toggle="dropdown"><i className="glyphicon glyphicon-user"></i> {fullname}</a> 
             <ul className="dropdown-menu"> 
              <li><a href="/profile">Edit Profile</a></li> 
              <li><a href="/signout">Logout</a></li> 
             </ul> 
            </li> 
           </ul> 
          </nav> 
         </div> 
      ); 
     } 
    } 
    export default ReactMeteorDataWrap(Navbar); 

SignupForm.jsx（うダッシュにリダイレクトされる上記のナビゲーションバーを持つoardページ）

import ReactMeteorDataWrap from '../ReactMeteorDataWrap.jsx'; 

class SignupForm extends Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      message:'', 
      messageClass:'' 
     } 
     this.handleSubmit = this.handleSubmit.bind(this); 
     this.props.getMeteor(); 
    } 

    displayError(message){ 
     console.log(message); 
     this.setState({ 
      message:message, 
      messageClass:'alert alert-danger registerError' 
     }); 
    } 

    handleSubmit(e){ 
     e.preventDefault(); 
     this.setState({message:'', messageClass:'hidden'}); 
     const first_name = ReactDOM.findDOMNode(this.refs.first_name).value.trim(); 
     const last_name = ReactDOM.findDOMNode(this.refs.last_name).value.trim(); 
     const email = ReactDOM.findDOMNode(this.refs.email).value.trim(); 
     const password = ReactDOM.findDOMNode(this.refs.password).value.trim(); 
     const user = { 
      email:email,password:password, 
      profile:{ 
       fullname:(first_name + last_name).toLowerCase(), 
       firstname:first_name, lastname:last_name, 
       avatar:'http://placehold.it/150*150', 
       friends:[] 
      } 
     } 
     Accounts.createUser(user,(e) => { 
      console.log('user',user); 
      console.log('e',e); 
      if (e) { 
       this.displayError(e.reason); 
      } else { 
       FlowRouter.go('/dashboard'); 
      } 
     }); 
    } 

    render() { 
     return (
      <div className="row"> 
       <div className="signup"> 
        <h1>Sign up</h1> 
        <p className="text-muted">It's free and will always be</p> 
       </div> 
       <form onSubmit={this.handleSubmit}> 
        <div className="col-sm-9"> 
         <div className="row"> 
          <div className="col-sm-6 form-group"> 
           <input type="text" name="first_name" placeholder="First Name" ref="first_name" className="form-control"/> 
          </div> 

          <div className="col-sm-6 form-group"> 
           <input type="text" name="last_name" placeholder="Last Name" ref="last_name" className="form-control"/> 
          </div> 
         </div> 

         <div className="form-group"> 
          <input type="text" name="email" placeholder="Email or mobile number" ref="email" className="form-control"/> 
         </div> 

         <div className="form-group"> 
          <input type="password" name="password" placeholder="Password" ref="password" className="form-control"/> 
         </div> 
         <button type="submit" className="btn btn-md btn-success">signup</button> 
         <span className={this.state.messageClass}>{this.state.message}</span> 
        </div> 
       </form> 
      </div> 
     ); 
    } 
} 
export default ReactMeteorDataWrap(SignupForm); 

は大丈夫SignupFormとNavbar.jsx両方で小道具を通じてgetMeteorData（）を呼び出していますか？私はes6の方法でmixins機能を使いたかったからです。ログインすると、あなたが/ダッシュボードにリダイレクトしている場合には二つのことが一度起こる

Answer 1

、：

1. は流星がMeteor.usersコレクションを同期するために開始し
2. 新しいコンポーネントをレンダリング反応します。

Reactがレンダリングを開始するまでには、Meteor.user()が利用可能であるという保証はありません。実際には、Reactコンポーネントがマウントされたときにユーザーがまだ定義されていない可能性が非常に高いです。

ReactMeteorDataWrap.renderがgetMeteorDataにコールされても、ユーザーはまだ未定義です。これはあなたが見るものです。問題は、ユーザー文書が更新されたときにコードがgetMeteorDataを再度呼び出さないということです。

これを解決するにはいくつかの方法があります。 createContainerという形式のreact-meteor-dataパッケージを使用することをお勧めします。このパッケージは実際に動作する点を除き、ReactMeteorDataWrapクラスと似ています。 :)

はここthis.props.userはNavBarで利用できるようになります修正です：。

export default createContainer(() => { 
    return { user: Meteor.user() }; 
}, NavBar);