Meteor.user（）和localStorage.getItem（“Meteor.userId”）返回null

Question

Meteor.user()和localStorage.getItem('Meteor.userId')返回NULL，直到页面刷新 我使用从Meteor.user()值尝试和改变状态，因此重新渲染成分，但它会一直返回null，直到页面重新加载。

export default class Header extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = {loggedIn: Meteor.user() !== null}// false if no user 
    //is logged in 
    //save the component context to avoid scope issues 
    thisComponent = this; 
} 

onSubmit(e){ 
    e.preventDefault(); 
    let el = $(e.target); 
    let email = el.find('#email').val(); 
    let password = el.find('#password').val(); 
    let confirmPassword = el.find('#confirmPassword').val(); 

    // Login user 
    Meteor.loginWithPassword(email, password, err => { 
     if (err) { 
     Materialize.toast(err.reason, 4000); 
     } else { 
     Materialize.toast('Success loging in', 4000); 
     //change state just to cause a rerender 
     thisComponent.setState({ loggedIn: true }) 
     } 
    }); 
    } 

    render() { 
    //if user is logged in 
    if(Meteor.user()) { 
     return <Redirect to='/dashboard' />; 
    } else { 
     return <LoginComponent />; 
    } 
    } 

Answer 1

您需要使用反应性数据源才能访问组件中的Meteor.user（）对象。最好的方法是将数据容器中的特定组件（作为整个应用程序）或作为道具传递给组件的Meteor.user（）对象。

示例使用createContainer：

import { Meteor } from 'meteor/meteor'; 
import { createContainer } from 'meteor/react-meteor-data'; 
import { Header } from '/imports/ui/components/Header'; 

export default createContainer(() => { 
    const loading = !Meteor.user(); 
    const user = Meteor.user(); 
    return { loading, user }; 
}, Header); 

然后在标题：

export default class Header extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { loggedIn: !!user} 
     thisComponent = this; 
    } 

    onSubmit(e){ 
     e.preventDefault(); 
     let el = $(e.target); 
     let email = el.find('#email').val(); 
     let password = el.find('#password').val(); 
     let confirmPassword = el.find('#confirmPassword').val(); 
     // Login user 
     Meteor.loginWithPassword(email, password, err => { 
      if(err){ 
       Materialize.toast(err.reason, 4000); 
      }else { 
       Materialize.toast('Success loging in', 4000); 
       //change state just to cause a rerender 
       thisComponent.setState({ loggedIn: true }) 
      } 
     }); 
    } 

    render() { 
     { !!user ? <Redirect to='/dashboard' /> : <LoginComponent /> } 
    } 
} 

Answer 2

Meteor.user（）返回，因为异步问题的错误！

（Meteor.userId（）方法会返回一个ID，这比Meteor.user（）更快 - 返回一个对象）

因此，你可以使用Komposer来包装你的组件，这也是标准的流星/申请作出反应（并给页面足够的时间来加载Meteor.user（）对象，并把它传递到你的头组件作为道具）：

创建HeaderComposer文件：

import React from 'react'; 
import {composeWithTracker} from 'react-komposer'; 
// also import your Header here.. 

function composer(props, onData) { 
    const user = Meteor.user(); 
    onData(null, {user}) 
}; 

export default composeWithTracker(composer)(Header); 

，并在您HEA DER文件：

export default class Header extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = {loggedIn: this.props.user !== null}// false if no user 
    //is logged in 
    //save the component context to avoid scope issues 
    thisComponent = this; 
} 

onSubmit(e){ 
    e.preventDefault(); 
    let el = $(e.target); 
    let email = el.find('#email').val(); 
    let password = el.find('#password').val(); 
    let confirmPassword = el.find('#confirmPassword').val(); 

    // Login user 
    Meteor.loginWithPassword(email, password, err => { 
     if (err) { 
     Materialize.toast(err.reason, 4000); 
     } else { 
     Materialize.toast('Success loging in', 4000); 
     //change state just to cause a rerender 
     thisComponent.setState({ loggedIn: true }) 
     } 
    }); 
    } 

    render() { 
    //if user is logged in 
    if(this.props.user) { 
     return <Redirect to='/dashboard' />; 
    } else { 
     return <LoginComponent />; 
    } 
    } 
} 

，当然，在另一个组件文件，在那里你呈现你头组件，随时当你处理localStorage的使用HeaderComposer代替