'dispatch' 不是一个函数，当参数到 mapToDispatchToProps（）在 Redux 中

javascript reactjs redux react-redux

2022-08-30 02:29:22

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

我很好奇为什么会这样，在redux文档中的示例TODO应用程序中，mapDispatchToProps方法的设置方式相同。当我在函数中控制台.log（调度）时，它说调度是类型对象。我可以继续以这种方式使用调度，但是在我继续使用redux之前，我会更好地知道为什么会发生这种情况。我正在使用带有babel加载器的webpack进行编译。

我的代码：

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

干杯。

答案 1

如果要使用而不只使用第一个参数。mapDispatchToPropsmapStateToPropsnull

export default connect(null, mapDispatchToProps)(Start)

答案 2

您只是缺少的第一个参数，即方法。摘自 Redux todo 应用程序：connectmapStateToProps

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)

'dispatch' 不是一个函数，当参数到 mapToDispatchToProps（） 在 Redux 中

'dispatch' 不是一个函数，当参数到 mapToDispatchToProps（）在 Redux 中