1

我是 react redux 的新手，我试图在组件中调用两个操作。单击按钮后有登录页面我正在调用一个将获取 auth_token 的操作，然后我在 componentWillReceiveProps() 中使用的那个令牌用于调用另一个操作。下面是我的代码

问题：当我单击按钮时，它显示我在问题标题中提到的错误。

用户界面：

<Button
        block
        bsSize="large"
        disabled={!this.validateForm()}
        onClick={this.handleSubmit.bind(this)}
      >
        Login
      </Button>

功能：

import React, { Component } from 'react'
import { Button, FormGroup, FormControl, ControlLabel } from 'react- 
 bootstrap';
import { loginActionCreater } from '../../actions/index';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchListOfCandidate } from 
'../../actions/FetchCandidateAction/FetchCandidateAction';

handleSubmit() {
this.props.loginActionCreater(this.state.email, this.state.password);
}

componentWillReceiveProps(nextProps) {
if (nextProps.token) {
  this.props.fetchListOfCandidate(nextProps.token);
  history.push('/HeaderComponents');
}
}


function mapStateToProps(state) {
 return {
error: state.login.error,
token: state.login.token
}
}

function mapDispatchToProps(dispatch) {
 return {
  actions: {
          loginActionCreater: bindActionCreators(loginActionCreater, dispatch),
          fetchListOfCandidate: bindActionCreators(fetchListOfCandidate, dispatch)
         }
 }
 }

 export default connect(mapStateToProps, mapDispatchToProps)(LoginComponent);

如果我只是分派单个动作，它工作正常，但在分派两个动作时，它显示标题中提到的错误。

这是我如何调度单个动作，它工作正常：

function mapDispatchToProps(dispatch) {
 return bindActionCreators({ loginActionCreater }, dispatch);
 }

如果有人知道我做错了什么，请纠正我。感谢您的帮助！

4

2 回答 2

1

mapDispatchToProps当您有两个操作时，问题出在您的方法中。看这里：

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      loginActionCreater: bindActionCreators(loginActionCreater, dispatch),
      fetchListOfCandidate: bindActionCreators(fetchListOfCandidate, dispatch)
    }
  }
}

您正在返回一个带有 key 的对象action。当你有一个单一的动作时，你的mapDispatchToProps样子是这样的：

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ loginActionCreater }, dispatch);
}

它没有返回带有 key 的对象action。

如果您想mapDispatchToProps通过两个操作来保持您的实施。请尝试像这样调用您的操作：

this.props.actions.loginActionCreater()
于 2018-08-28T14:04:13.953 回答
0

您正在使用mapDispatchToProps带有不必要的父对象的函数，即actions. 如果您想保留此逻辑，则需要使用以下操作：

this.props.actions.loginActionCreater()

当你想使用多个动作创建器时bindActionCreators，你可以简单地这样做：

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ loginActionCreater , fetchListOfCandidate }, dispatch)
}

通过此设置，您可以将动作创建者用作this.props.loginActionCreator.

顺便说一句，实际上你不需要bindActionCreators或根本不需要mapDispatchToProps。如果你喜欢有一个速记方法。像这样使用连接：

connect(mapStateToProps, { loginActionCreater , fetchListOfCandidate } )(LoginComponent);
于 2018-08-28T14:12:38.947 回答