React Redux，Uncaught TypeError：this.props.dispatch不是函数，在尝试调度表单提交时？

Question

我不确定是什么导致了这个问题，因为我有另外一个几乎相同的组件，除了另一个组件是无状态的。 我不确定这是否有问题？ 应该不对吗？

下面的代码给出了： Uncaught TypeError: this.props.dispatch is not a function at Signup.handleRegister当尝试提交表单时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：遵循Christopher Ngo的建议

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

试试这样：

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);

Answer 2

您的已连接组件将导出为默认导出，因此您需要确保将Signup作为默认导入导入其他文件而不是命名导出。 在这种情况下，最好不要导出未连接的组件以避免此类错误。

导入您的注册组件，如

import Signup from 'path/to/Signup'