我如何在Meteor中重新渲染一个反应组件？在Meteor中反应component.forceUpdate错误

问题描述：

我使用Meteor 1.4制作登录表单并作出反应15.我的目标是在登录后重定向用户。当前用户登录时，页面不会重定向。但是，登录后，您将无法再访问登录或注册页面。我如何在Meteor中重新渲染一个反应组件？在Meteor中反应component.forceUpdate错误

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

为什么在登录过程后不重定向。 * forceUpdate *从未在类中声明。 – collision

我可以使用rr4重定向的唯一方法是在重新渲染之后。你是什么意思forceupdate从未被宣布？ – fatahn

您的课程并非从您的问题示例代码中完成。而且我无法在课堂中找到'forceUpdate'。这是你收到这个错误。 '发送调用'login'结果的异常：TypeError：this.forceUpdate不是函数' – collision

答

只需在这种情况下使用'状态'。成功使用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) => {....})

Arrow功能来声明功能是指父母的this，而不是目前的范围的。

它有助于setState渲染，因为我只需要在用户登录后渲染。同时将onStubmit方法内的setState引发此错误 ''在调用'login'的结果中传递异常：TypeError：this.setState不是函数 ''' 这个，即使当这个存储在一个不同的变量来捕获父上下文 – fatahn

看起来你没有在调用onSubmit时绑定'this' ... 请让我知道你是如何调用onSubmit函数。你能粘贴登录组件吗？ –

onSubmit函数按预期调用。使用国家帮助。但是Meteor.user（）的其他一些问题正在悄然而至。我想问题是关于正确绑定和关键字。我必须这样做： componentDidMount（）{ //保存组件上下文以避免范围问题 thisComponent = this; } ''' 在处理状态时可以获得正确的上下文。 – fatahn

答

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

let thisComponent; 

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 /> 
    } 
    }

这样做和形式确实重投，因此问题解决了。但该州似乎并没有像预期的那样改变。 Meteor.user（）似乎会延迟数据。

现在我正在关注流星特定的[新问题]（http://stackoverflow.com/questions/43593096/meteor-user-and-localstorage-getitemmeteor-userid-return-null）。 – fatahn

我如何在Meteor中重新渲染一个反应组件？在Meteor中反应component.forceUpdate错误

相关推荐