我正在使用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
而不是当前作用域的。