2

我目前正在尝试使用 Meteor 和 React 来做一个应用程序，但我一直在做登录表单。确实，我想用来ReactComponent.state保存表单的错误并显示它们

Meteor.loginWithPassword(email, password, err => {
  if (err) {
    this.setState({error: true, errorMessage: "User not found or password incorrect!"});
    return;
  } else {
  }
});

不幸的是，这似乎不起作用（它会引发警告）：

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Signin component.

您可能不需要它，但这是render我ReactComponent.state用来显示错误的函数

render() {
return <form onSubmit={this.handleSubmit}>
  {this.state.error
    ? <p style={{
        color: 'red'
      }}>{this.state.errorMessage}</p>
    : ""}
  <label>Email</label>
  <br/>
  <input type="email" value={this.state.email} onChange={this.handleChange('email')} required/>
  <br/>
  <label>Password</label>
  <br/>
  <input type="password" value={this.state.password} onChange={this.handleChange('password')} required/>
  <br/><br/>
  <button type="submit">Sign in</button>
</form>
}

Meteor.loginWithPassword是在函数内部handleSubmit。我想这ReactComponent.state不能在回调中更新，但我不知道为什么以及如何使它工作。

当然，我没有忘记initialState组件的：

getInitialState: function() {
  return {email: '', password: '', error: false, errorMessage: ''};
},

谢谢

4

1 回答 1

1

我们发现了问题，事实上，我们是按照这篇文章来处理我们的应用程序中的角色和权限，问题是在模板中，我们使用的loggingIn: Meteor.loggingIn()是 ，它也被Meteor.loginWith*函数使用，因此我们的布局在调用时动态重新渲染表单提交中的函数，为避免此问题，我们将loggingIn状态更改为

loggingIn: FlowRouter.current().route.group.name !== "public" && Meteor.loggingIn()

避免调用提交表单时动态重新加载模板。

于 2016-02-18T08:57:54.780 回答