Javascript mapDispatchToProps不'；t工作：未捕获类型错误：\ 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）的函数添加到此.onSubmit（）时，我的addCountdown似乎可以正确接收所有内容，但当我尝试将其与addCountdown操作连接时，它显示未捕获的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);

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

---

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

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

---

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

当您将函数作为引用传递时，您将失去上下文（

此

）。看看这个

要解决您的问题，请执行以下更改：

 <CountdownForm onSubmit={this.onSubmit} />

到

在渲染显示中，

console.log（props）

的结果是什么？当添加下面的渲染时，它显示：未捕获引用错误：props未定义dear@Lukas，欢迎使用堆栈溢出，我认为您的问题来自输入错误。如果可以，请在CodeSandBox上上载重新制作的问题。像您的问题这样的问题应该在项目中进行分析。props没有定义，因为他是这个意思。Propstory是

console.log（this.props）

，抱歉，但他使用的是箭头函数。他使用的是箭头函数。这意味着他正在使用babel插件处理类属性，该类属性转换类中的箭头函数，默认情况下，

此

对象绑定。你的答案是正确的，但不是针对这个版本。是的，我错过了，这也会是一个不同的错误，不是

\u这个。props.addCountdown

不是一个函数。它将读取无法访问

未定义的
的
addCountdown
 <CountdownForm onSubmit={this.onSubmit} />

 <CountdownForm onSubmit={this.onSubmit.bind(this)} />