反应类型错误：this.props.handleSubmit 不是 function

Question

I've built a wrapped class component that is meant to submit data using an API request with axios. However, when I press the submit button I get the error TypeError: this.props.handleSubmit is not a function .

I've built similar components and they worked, but for some reason I'm getting this TypeError. Am I missing something?

Component

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 for the component

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)

Answer 1

The react-redux connect function takes mapStateToProps as the first argument and mapDispatchToProps as the second argument. If you don't have a mapStateToProps , you can just provide null as the first argument.

export default connect(null, mapDispatchToProps)(AddPlayer)

Edit: For recordkeeping, the other issue was importing the unconnected component instead of the connected component when using it elsewhere.

Answer 2

please instead of onSubmit={this.handleSubmit} do onSubmit={()=>this.handleSubmit()} and also same with onChange={this.handleName} do onChange={()=>this.handleName()}