我正在使用Meteor 1.4制作登录表单并做出15的反应。我的目的是在登录后重定向用户。当前,当用户登录时,页面不会重定向。但是,您将无法在预期的登录状态下访问登录或注册页面。

import React from 'react';
import { NavLink, Redirect } from 'react-router-dom';
import { Accounts } from 'meteor/accounts-base';
import { Meteor } from 'meteor/meteor';

export default class Header extends React.Component {
    constructor(){
        super()
        this.forceUpdate = this.forceUpdate.bind(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, function(err){
            if(err){
                alert(err.reason);
            } else {
                //if logged in
                alert('Successfully logged in');
                this.forceUpdate();
            }
        });
    }
    render() {
        //if user is logged in => this part works!
        if(Meteor.user()){
            return <Redirect to='/' />;
        }else
        return (
        <LoginForm />
        )
    }
}


登录代码有效,唯一的问题是我希望在提交表单时重新呈现组件,我只能使用forceUpdate做到这一点,这会抛出此错误:
路由位于反应路由器4中,而不是流星的流路由器中

Exception in delivering result of invoking 'login': TypeError: this.forceUpdate is not a function

最佳答案

在这种情况下,只需使用“状态”即可。
成功使用this.setState({loggedIn: true})并在渲染内部使用状态。

render(){

     this.state.loggedIn;

     if(Meteor.user()){
         return <Redirect to='/' />;
     } else {
         return (
            <LoginForm />
         )
     }
 }


注意:目前您没有使用ES6的方法来声明函数,即您正在使用

Meteor.loginWithPassword(email, password, function(err){....})


代替

Meteor.loginWithPassword(email, password, (err) => {....})


箭头函数引用父对象的this而不是当前作用域的。

09-28 10:49