javascript - mapDispatchToProps不起作用:未捕获的TypeError:_this.props.addCountdown不是函数

我正在尝试构建我的第一个应用程序，但遇到了麻烦。我有一个表单组件，应该通过onSubmit处理程序发送对象。

onSubmit = (e) => {
        e.preventDefault();
        this.props.onSubmit({
            title: this.state.title,
            category: this.state.category,
            releaseDate: this.state.releaseDate.valueOf(),
            description: this.state.description
        });
    };

当将带有console.log（countdown）的函数添加到this.onSubmit（）时，我的addCountdown似乎正确接收了所有内容，但是当我尝试通过addCountdown操作将其连接时，它显示了Uncaught TypeError：_this.props.addCountdown不是函数。

import React from 'react';
import { connect } from 'react-redux';
import CountdownForm from './CountdownForm';
import { addCountdown } from '../actions/countdowns';

export class AddCountdownItem extends React.Component {
    onSubmit = (countdown) => {
        this.props.addCountdown(countdown);
        this.props.history.push('/');
    }
    render() {
        return (
            <div>
                <h1>Add countdown</h1>
                <CountdownForm onSubmit={this.onSubmit} />
            </div>
        )
    }
}

const mapDispatchToProps = (dispatch) => ({
    addCountdown: (countdown) => dispatch(addCountdown(countdown))
});

export default connect(undefined, mapDispatchToProps)(AddCountdownItem);

这里的动作：

export const addCountdown = (
    {
      title = '',
      category = '',
      releaseDate = 0,
      description = ''
    } = {}
  ) => ({
    type: 'ADD_COUNTDOWN',
    countdown: {
      title,
      category,
      releaseDate,
      description
    }
  });

添加了沙箱。这是我第一次使用它，因此希望它能正确完成。抱歉一团糟，但我才刚刚开始。

https://codesandbox.io/s/github/Lukasz-Gumpert/React-boilerplate

最佳答案

查看您的代码，发现问题...您正在使用未连接的AddCountdownItem组件。在您的AppRouter文件中，通过以下方式导入它：

import  AddCountdownItem  from '../components/AddCountdownItem';

这将导入默认导出，在您的情况下为连接到redux的组件。现在道具可用。