Question

当我注册时，我被重定向到具有Navbar组件的/ dashboard页面。它与在ReactMeteorDataWrap.jsx中定义的ReactMeteorData链接。注册后，我在控制台上获得Object {_id：“qW8wQcc2sjiM8TXcc”，profile：Object，emails：Array [1]} data Object {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（注册后用户将被重定向到上面有导航栏的仪表板页面）

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

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

React呈现新组件
Meteor开始同步Meteor.users集合。

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

currentUser显示为undefined

1 个答案: