我正在尝试构建我的第一个应用程序,但我陷入了困境。我有一个表单组件,它应该通过 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 is not一个函数。
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);
这里是 Action :
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 的组件。现在 Prop 已经可用。
关于javascript - mapDispatchToProps 不起作用 : Uncaught TypeError: _this. props.addCountdown 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60834647/