reactjs – TypeError：dispatch不是函数.在React无状态组件中

发布时间：2020-12-15 16:19:55 所属栏目：百科来源：网络整理

导读：我刚刚进入React-Redux.我使用mapDispatchToProps和mapStateToProps成功地将几个组件连接到商店,所以我的设置似乎是正确的.现在我有一个无状态组件,带有一个按钮,可以调度一个动作： import React from 'react';import RaisedButton from 'material-ui/Raise

我刚刚进入React-Redux.我使用mapDispatchToProps和mapStateToProps成功地将几个组件连接到商店,所以我的设置似乎是正确的.现在我有一个无状态组件,带有一个按钮,可以调度一个动作：

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { toggleSnackbar } from '../../store/actions';

const handleClick = props => {
    console.log(props.toggleSnackbar)
    props.toggleSnackbar("test")
}

const ButtonComponent = props =>
    (
      <div>
          <RaisedButton
            onClick={() => handleClick(props)}
          />
        </div>
      </div>
    );

const mapDispatchToProps = dispatch => bindActionCreators({
    toggleSnackbar,},dispatch);

export default connect(mapDispatchToProps)(muiThemeable()(ButtonComponent))

现在我收到错误：

Uncaught TypeError: dispatch is not a function
    at Object.toggleSnackbar (bindActionCreators.js:3)
    at handleClick (BottomCTA.jsx:28)
    at Object.onClick (BottomCTA.jsx:61)
    at EnhancedButton._this.handleClick (EnhancedButton.js:144)
    at Object../node_modules/react-dom/lib/ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69)
    at executeDispatch (EventPluginUtils.js:85)
    at Object.executeDispatchesInOrder (EventPluginUtils.js:108)
    at executeDispatchesAndRelease (EventPluginHub.js:43)
    at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (forEachAccumulated.js:24)
    at Object.processEventQueue (EventPluginHub.js:254)
    at runEventQueueInBatch (ReactEventEmitterMixin.js:17)
    at Object.handleTopLevel [as _handleTopLevel] (ReactEventEmitterMixin.js:27)
    at handleTopLevelImpl (ReactEventListener.js:72)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)

控制台日志：

? () {
    return dispatch(actionCreator.apply(undefined,arguments));
  }

toggleSnackbar动作：

export function toggleSnackbar(message) {
  return {
    type: 'TOGGLE_SNACKBAR',payload: message,};
}

我无法弄清楚这里有什么问题？

编辑：

这是同一个项目中的另一个组件,可以使用相同的aciton工作得很好：

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import RaisedButton from 'material-ui/RaisedButton';
import './BuyingFormContainer.css';
import { formatDollarToFloat } from '../../shared/formater';
import { BuyingForm } from '../';
import { buyTicket,toggleSnackbar } from '../../store/actions';
import { contentEn } from '../../assets';

const customButton = {
  buttonStyle: { borderRadius: '100px',height: '40px',lineHeight: '35px' },overlayStyle: { borderRadius: '100px' },style: { borderRadius: '100px',minWidth: '200px',color: '#fffff' },};

const handleClick = (props) => {
    console.log(props.toggleSnackbar)
  props.buyTicket(formatDollarToFloat(props.buyingForm.values.buyingFormInput));
  //TODO: Trigger this after BUY_TICKET_SUCCESS
  props.toggleSnackbar("Prediction Recieved " + props.buyingForm.values.buyingFormInput)
}

const buyingFormContainer = props => (
  <div className="buyingForm__container" id={'buyingForm'}>
    <BuyingForm />
    <RaisedButton
      label={contentEn.topComponent.buttonLabel}
      style={customButton.style}
      buttonStyle={customButton.buttonStyle}
      overlayStyle={customButton.overlayStyle}
      className="buyingForm_raisedButton"
      secondary
      onClick={() => handleClick(props)}
    />
  </div>
);

buyingFormContainer.propTypes = {
  buyTicket: PropTypes.func.isRequired,};

const mapStateToProps = state => ({
  buyingForm: state.form.buyingForm,});

const mapDispatchToProps = dispatch => bindActionCreators({
  buyTicket,toggleSnackbar,dispatch);

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

解决方法

connect with an arity of 1使用唯一的参数作为mapStateToProps,而不是mapDispatchToProps：

function mapStateToProps(state) {
  return { todos: state.todos }
}

export default connect(mapStateToProps)(TodoApp)

尝试传递null作为第一个参数：

export default connect(null,mapDispatchToProps)(...)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!