React Redux, Uncaught TypeError: this.props.dispatch не является функцией при попытке отправить форму отправки?

Question

Я не уверен, что является причиной проблемы, так как у меня есть другой компонент, который почти идентичен, за исключением того, что другой компонент не имеет состояния.Я не уверен, если это создает проблему?Это не должно быть верно?

Следующий код дает мне: Uncaught TypeError: this.props.dispatch is not a function at Signup.handleRegister, при попытке отправить форму.

import React from 'react';
import { connect } from 'react-redux';
import { registerUser } from '../../actions/index';

export class Signup extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            displayname: "",
            username: "",
            password: ""
        }
    }

    handleRegister = e => {
        e.preventDefault();
        console.log('triggered handle register'); //logs: 'triggered handle register'
        console.log(this.state);                  //logs: {displayname: "", username: "", password: ""}, as intended with empty inputs
        console.log(this.props);                  //logs: {}
        this.props.dispatch(registerUser(this.state));
    }

    render(){
        return (
            <div className="form-container sign-up-container">
                <form className="sign-up-form" onSubmit={this.handleRegister}>
                    <h2>Create Account</h2>
                    <input type="text" placeholder="Display Name" onChange={e => this.setState({ displayname: e.target.value })} />
                    <input type="text" placeholder="Username" onChange={e => this.setState({ username: e.target.value })} />
                    <input type="password" placeholder="Password" onChange={e => this.setState({ password: e.target.value })} />
                    <button className="toggle-btn">Sign Up</button>
                </form>
            </div>
        );
    }
}

const mapStateToProps = state => ({});

export default connect(mapStateToProps)(Signup);

Обновление: что-то вроде этого?

const mapDispatchToProps = dispatch => {
    return {
        //the redux-action here instead of the handleRegister?
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Signup);

Обновление 2: по предложению Кристофера Нго

import React from 'react';
import { connect } from 'react-redux';
import { registerUser } from '../../actions/index';

export class Signup extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            displayname: "",
            username: "",
            password: ""
        }
    }

    handleRegister = e => {
        e.preventDefault();
        console.log('triggered handle register'); //logs: 'triggered handle register'
        console.log(this.state);                  //logs: {displayname: "", username: "", password: ""}, as intended with empty inputs
        console.log(this);                  
//logs: Signup {props: {…}, context{…}, refs: {…}, updater: {…}, handleRegister: ƒ, …}
        this.props.registerUser(this.state);
    }

    render() {
        return (
            <div className="form-container sign-up-container">
                <form className="sign-up-form" onSubmit={this.handleRegister}>
                    <h2>Create Account</h2>
                    <input type="text" placeholder="Display Name" onChange={e => this.setState({ displayname: e.target.value })} />
                    <input type="text" placeholder="Username" onChange={e => this.setState({ username: e.target.value })} />
                    <input type="password" placeholder="Password" onChange={e => this.setState({ password: e.target.value })} />
                    <button className="toggle-btn">Sign Up</button>
                </form>
            </div>
        );
    }
}

// const mapStateToProps = state => ({});

const mapDispatchToProps = (dispatch) => {
    return {
        registerUser: (userInfo) => {
            dispatch(registerUser(userInfo))
        }
    }
}

export default connect(null, mapDispatchToProps)(Signup);

Я изменил журнал консоли в регистре дескрипторов, чтобы проверить this, и похоже, что для компонента «Регистрация» по-прежнему не доступны реквизиты или рассылка..

Answer 1

Подключенный компонент экспортируется как экспорт по умолчанию, поэтому необходимо убедиться, что вы импортируете Signup в качестве импорта по умолчанию в другие файлы, а не в именованный экспорт. В таких сценариях лучше не экспортировать неподключенные компоненты, чтобы избежать таких ошибок.

Импортируйте ваш компонент регистрации как

import Signup from 'path/to/Signup'

Answer 2

Попробуй так:

import React from 'react';
import { connect } from 'react-redux';
import { registerUser } from '../../actions/index';

class Signup extends React.Component {
constructor(props){
    super(props);

    this.state = {
        displayname: "",
        username: "",
        password: ""
    }
}

handleRegister = e => {
    e.preventDefault();
    console.log('triggered handle register'); //logs: 'triggered handle register'
    console.log(this.state);                  //logs: {displayname: "", username: "", password: ""}, as intended with empty inputs
    console.log(this.props);                  //logs: {}
    this.props.registerUser(this.state);
}

render(){
    return (
        <div className="form-container sign-up-container">
            <form className="sign-up-form" onSubmit={this.handleRegister}>
                <h2>Create Account</h2>
                <input type="text" placeholder="Display Name" onChange={e => this.setState({ displayname: e.target.value })} />
                <input type="text" placeholder="Username" onChange={e => this.setState({ username: e.target.value })} />
                <input type="password" placeholder="Password" onChange={e => this.setState({ password: e.target.value })} />
                <button className="toggle-btn">Sign Up</button>
            </form>
        </div>
    );
}
}

const mapStateToProps = state => ({});

const mapDispatchToProps = (dispatch) => {
    return{
      registerUser: (userInfo) => {
         dispatch(registerUser(userInfo))
      }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Signup);