我构建了一个包装类组件，该组件旨在使用axios的API请求提交数据。但是，当我按下提交按钮时，我会得到错误TypeError: this.props.handleSubmit is not a function。
我已经构建了类似的组件，它们也起作用了，但由于某种原因，我得到了这个TypeError。我是不是错过了什么？
组件
class AddPlayer extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
};
this.handleName = this.handleName.bind(this);
};
// Name Input
handleName = e => {
this.setState({
name: e.currentTarget.value
});
};
// handle form submit
handleSubmit = e => {
e.preventDefault();
this.props.handleClick({ ...this.state });
this.setState({
name: "",
});
};
render() {
const { name } = this.state;
return (
<form
onSubmit={this.handleSubmit}>
<h2>Input Player</h2>
<div>
<div >
<label htmlFor="player name">
Enter new Player Name:
</label>
<input
type="text"
id="player name"
name="player name"
value={name}
onChange={this.handleName}
maxLength="25"
minLength="2"
required
ref={function (input) {
if (input != null) {
input.focus();
}
}}
/>
</div>
<button disabled={name.length <= 2} type="submit">Add Player</button>
</div>
</form>
)
};
};
组件的index.js
import { connect } from 'react-redux';
import AddPlayer from './AddPlayer';
import { postPlayer } from '../../data/actions/api';
// Dispatch
const mapDispatchToProps = dispatch => {
return {
handleClick: (data) => dispatch(postPlayer(data)),
};
};
export default connect(null, mapDispatchToProps)(AddPlayer)
react reduxconnect函数将mapStateToProps作为第一个参数，mapDispatchToProps作为第二个参数。如果您没有mapStateToProps，您可以只提供null作为第一个参数。
export default connect(null, mapDispatchToProps)(AddPlayer)
编辑：对于记录保存，另一个问题是在其他地方使用未连接的组件时导入该组件，而不是导入已连接的组件。
请不要使用onSubmit=｛this.handleSubmit｝而使用onSubmit=｛(