Redux中mapToDispatchToProps（）的参数时，“ dispatch”不是函数

JavaScript

古一蛋蛋

2020-03-12

我是一名javascript / redux / react初学者，使用redux，react-redux和react构建一个小型应用程序。出于某种原因，当在连接（反应-redux绑定）的同时使用mapDispatchToProps函数时，我收到一个TypeError，指示我尝试执行生成的prop时，dispatch不是函数。但是，当我将调度称为道具时（请参阅提供的代码中的setAddr函数），它可以工作。

我很好奇这是为什么，在redux docs的示例TODO应用程序中，mapDispatchToProps方法是以相同的方式设置的。当我在函数内部进行console.log（dispatch）时，它说dispatch是类型对象。我可以继续以这种方式使用调度，但是在继续使用redux之前，我会更好地知道为什么会这样。我正在将webpack与babel-loaders一起使用进行编译。

我的代码：

import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
import { setAddresses } from '../actions.js';
import GeoCode from './geoCode.js';
import FlatButton from 'material-ui/lib/flat-button';

const Start = React.createClass({
    propTypes: {
        onSubmit: PropTypes.func.isRequired
    },

    setAddr: function(){
        this.props.dispatch(
            setAddresses({
                pickup: this.refs.pickup.state.address,
                dropoff: this.refs.dropoff.state.address
            })
        )   

    },

    render: function() {
        return (
            <div>
                <div className="row">
                    <div className="col-xs-6">
                        <GeoCode ref='pickup' />
                    </div>
                    <div className="col-xs-6">
                        <GeoCode ref='dropoff' />
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-6">
                        <FlatButton 
                            label='Does Not Work'
                            onClick={this.props.onSubmit({
                                pickup: this.refs.pickup.state.address,
                                dropoff: this.refs.dropoff.state.address
                            })} 
                            />
                    </div>
                    <div className="col-xs-6">
                        <FlatButton 
                            label='Works'
                            onClick={this.setAddr} 
                            />
                    </div>
                </div>
            </div>
        );
    }
})

const mapDispatchToProps = (dispatch) => {
    return {
        onSubmit: (data) => {
            dispatch(setAddresses(data))
        }
    }
}

const StartContainer = connect(mapDispatchToProps)(Start)

export default StartContainer

干杯。

第916篇《Redux中mapToDispatchToProps（）的参数时，“ dispatch”不是函数》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答
Stafan猿 2020.03.12

当您不提供mapDispatchToProps第二个参数时，如下所示：

export default connect(mapStateToProps)(Checkbox)

那么您将自动获得对组件的道具的派遣，因此您可以：

class SomeComp extends React.Component {
  constructor(props, context) {
    super(props, context);
  }
  componentDidMount() {
    this.props.dispatch(ACTION GOES HERE);
  }
....

没有任何mapDispatchToProps

小胖Itachi 2020.03.12

我这样使用..其易于理解的第一个参数是mapStateToProps，第二个参数是mapDispatchToProps最后与函数/类连接。 

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(TodoList);
神无Davaid 2020.03.12

有时在传递连接时更改组件功能的顺序时也会发生此错误。

顺序错误：

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

正确的顺序：

export default connect(mapStateToProps,mapDispatchToProps)(TodoList);
MandyJinJin路易 2020.03.12

采用 

const StartContainer = connect(null, mapDispatchToProps)(Start)

代替 

const StartContainer = connect(mapDispatchToProps)(Start)
十三西里Sam 2020.03.12

如果您想mapDispatchToProps不带参数地mapStateToProps使用null第一个参数。

export default connect(null, mapDispatchToProps)(Start)

GreenNear 2020.03.12

你只是缺少第一个参数connect，这是mapStateToProps方法。摘自Redux todo应用程序：

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)
逆天Green古一 2020.03.12

我通过交换参数解决了它 

export default connect(mapDispatchToProps, mapStateToProps)(Checkbox)

这是错误的。在mapStateToProps有可能成为第一个参数：

export default connect(mapStateToProps, mapDispatchToProps)(Checkbox)

现在听起来很明显，但可能会帮助某人。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android