javascript - currentUser 显示为未定义

Question

当我注册时，我被重定向到具有 Navbar 组件的/dashboard 页面。它与 ReactMeteorDataWrap.jsx 中定义的 ReactMeteorData 链接。注册后，我在控制台上得到对象 {_id: "qW8wQcc2sjiM8TXcc", profile: Object, emails: Array[1]} data Object {currentUser: Object}。但是 currentUser 显示为空。

我的代码

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(/dashboard)

 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(注册后用户将被重定向到上面有导航栏的仪表板页面)

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 中的 props 调用 getMeteorData() 可以吗？因为我想以 es6 的方式使用 mixins 功能。

Answer 1

当您登录并被重定向到/dashboard 时，会同时发生两件事:

1. React 渲染新组件
2. Meteor 开始同步 Meteor.users 集合。

无法保证 Meteor.user() 在 React 开始渲染时可用。事实上，当 React 组件挂载时，用户很可能仍然是未定义的。

当您的ReactMeteorDataWrap.render 调用getMeteorData 时，用户仍然是未定义的，这就是您所看到的。问题是当用户文档更新时，您的代码不会再次调用 getMeteorData。

有几种方法可以解决这个问题。我建议使用 createContainer 形式 react-meteor-data包，它类似于您的 ReactMeteorDataWrap 类，只是它实际上可以工作。 :)

这是一个使 this.props.user 在 NavBar 中可用的修复:

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