Reactjs 登录不工作后响应重定向

我正在尝试使用react路由器和redux构建我的react应用程序。但是，我无法获取返回仪表板post登录的url。有人能指出我的错误吗

const form = reduxForm({  
  form: 'login'
});

class Login extends Component {  

    handleFormSubmit(formProps) {
      this.props.loginUser(formProps);
      var token = cookie.load('token');
      if(token !== undefined){
        const location = this.props.location;
        if (location.state && location.state.nextPathname) {
          browserHistory.push(location.state.nextPathname)
        } else {
          browserHistory.push('/')
        }
      }
    }

    renderAlert() {
    if(this.props.errorMessage) {
      return (
        <div>
          <span><strong>Error!</strong> Authentication error</span>
        </div>
      );
    }
  }

  render() {
    const { handleSubmit } = this.props;

    return (
      <div>
        <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
        {this.renderAlert()}
          <div>
            <label>Username</label>
            <Field name="username" className="form-control" component="input" type="text" />
          </div>
          <div>
            <label>Password</label>
            <Field name="password" className="form-control" component="input" type="password" />
          </div>
          <button type="submit" className="btn btn-primary submitButton">Login</button>
        </form>
      </div>
    );
  }
}

function mapStateToProps(state) {  
  return {
    errorMessage: state.auth.error,
    message: state.auth.message
  };
}

const mapDispatchToProps = dispatch => ({
  loginUser: () =>
    dispatch(loginUser);
});

export default connect(mapStateToProps, mapDispatchToProps)(form(Login));  

---

这是我的第一个react redux项目，所以这个错误可能非常简单。非常感谢你的帮助

问题的根源似乎在于处理异步调用-在

handleFormSubmit（formProps）

函数中，您有以下两行代码：

this.props.loginUser(formProps);
var token = cookie.load('token');

您正在调度将要运行异步函数的操作（

loginUser（formProps）

使用axios执行post），然后您立即尝试通过加载成功后应存储在cookie中的令牌来使用此异步函数的结果。这不起作用，因为在运行异步函数后，JavaScript不会立即等待结果，而是返回到

handleFormSubmit

函数，并在完成后运行其余部分。我确信，如果您

console.log

'd您的

令牌

将是未定义的（假设在运行应用程序之前没有cookies）-该功能将继续，而不等待您的异步功能

因此，我知道有两个很好的选项可以用来解决这个问题：

简单的标准解决方案：运行

dispatch（{type:AUTH\u USER}）在异步post成功后-让此操作创建者更改redux持有的状态（例如：
loginFlag
）。将
loginFlag
作为道具包含在
Login
组件中（将其包含在
MapStateTrops
函数中）。最后，将
组件willreceiveprops（nextrops）
生命周期功能包含到
登录
组件中，并让它处理路由更改。包括以下内容：

componetWillReceiveProps（下一步）{
if（nextrops.loginFlag）{
var token=cookie.load（'token'）；
如果（令牌！==未定义）{
const location=this.props.location；
if（location.state&&location.state.nextPathname）{
browserHistory.push（location.state.nextPathname）
}否则{
browserHistory.push（“/”）
}
}
}
}

问题的根源似乎在于处理异步调用-在

handleFormSubmit（formProps）

函数中，您有以下两行代码：

this.props.loginUser(formProps);
var token = cookie.load('token');

您正在调度将要运行异步函数的操作（

loginUser（formProps）

使用axios执行post），然后您立即尝试通过加载成功后应存储在cookie中的令牌来使用此异步函数的结果。这不起作用，因为在运行异步函数后，JavaScript不会立即等待结果，而是返回到

handleFormSubmit

函数，并在完成后运行其余部分。我确信，如果您

console.log

'd您的

令牌

将是未定义的（假设在运行应用程序之前没有cookies）-该功能将继续，而不等待您的异步功能

因此，我知道有两个很好的选项可以用来解决这个问题：

简单的标准解决方案：运行

dispatch（{type:AUTH\u USER}）在异步post成功后-让此操作创建者更改redux持有的状态（例如：
loginFlag
）。将
loginFlag
作为道具包含在
Login
组件中（将其包含在
MapStateTrops
函数中）。最后，将
组件willreceiveprops（nextrops）
生命周期功能包含到
登录
组件中，并让它处理路由更改。包括以下内容：

componetWillReceiveProps（下一步）{
if（nextrops.loginFlag）{
var token=cookie.load（'token'）；
如果（令牌！==未定义）{
const location=this.props.location；
if（location.state&&location.state.nextPathname）{
browserHistory.push（location.state.nextPathname）
}否则{
browserHistory.push（“/”）
}
}
}
}

非常感谢！我使用了第二种方法，它无缝地工作。还有一个问题，通过handleSubmit在异步调用中调用

browserHistory.push

方法是否正确？这是“反应”方式，还是我应该在其他功能/位置调用它？好问题！我觉得处理这个过程的更“反应”的方式是我建议的第一个选项——将由于异步调用而产生的副作用降到最低，只需让它更新一个标志/将API响应存储在redux状态，并让

componentWillReceiveProps

对此作出反应即可（调度另一个动作、更改路线等）.然而，在您的操作中使用react router redux的browserHistory确实可以简化事情。.我最近读了一篇文章，其中对使用thunk这样的功能强大的中间件进行了更多的探讨，并对其表示担忧：非常感谢！我使用了第二种方法，而且效果非常好。另外一个问题是，调用

browserHistory.push是否正确

通过handleSubmit在异步调用中的方法？这是“react”方式还是我应该在其他函数/位置调用它？这是一个很好的问题！我觉得处理此过程的更多“react”方式是我建议的第一个选项-因为异步调用而产生的副作用最少，并且只需upda即可在redux状态下标记/存储API响应，并让

componentWillReceiveProps

对此做出反应（调度另一个操作、更改路由等）.然而，在您的操作中使用react router redux的browserHistory确实可以简化事情..我最近读了一篇文章，其中对使用thunk等功能强大的中间件进行了详细介绍：