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

古一蛋蛋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

干杯。

Stafan猿2020/03/12 11:01:21

当您不提供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

小胖Itachi2020/03/12 11:01:21

我这样使用..其易于理解的第一个参数是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);

神无Davaid2020/03/12 11:01:21

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

顺序错误：

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

正确的顺序：

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

MandyJinJin路易2020/03/12 11:01:21

采用

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

代替

const StartContainer = connect(mapDispatchToProps)(Start)

十三西里Sam2020/03/12 11:01:21

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

export default connect(null, mapDispatchToProps)(Start)

GreenNear2020/03/12 11:01:21

你只是缺少第一个参数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 11:01:21

我通过交换参数解决了它

export default connect(mapDispatchToProps, mapStateToProps)(Checkbox)

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

export default connect(mapStateToProps, mapDispatchToProps)(Checkbox)

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer