Javascript React Redux，Uncaught TypeError：当尝试发送表单提交时，this.props.dispatch不是一个函数？

我不确定是什么导致了这个问题，因为我有另一个几乎相同的组件，只是另一个组件是无状态的。我不确定这是否会造成问题？不应该吧

下面的代码告诉我：uncaughttypeerror:this.props.dispatch在尝试提交表单时不是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);

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

我更改了句柄寄存器中的控制台日志以检查这一点，但注册组件似乎仍然没有可用的道具或分派功能。

像这样尝试：

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

---

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

导入您的注册组件，如

import Signup from 'path/to/Signup'

---

由于我们必须将mapDispatchToProps函数作为第二个参数传递给connect方法，因此您必须传递该函数，以便从组件分派任何操作。@PulkitAggarwal您能提供一个在我的更新中可能是什么样的示例吗？@PulkitAggarwal同样来自文档，默认的mapDispatchToProps只是dispatch=>{dispatch}。如果您不提供mapDispatchToProps，将按照上述方式提供调度。那么为什么我需要将mapDispatchToProps放在connect方法中呢？@Kaleidics您是否将注册组件作为导入{Signup}从“/path/to/Signup”@Shubham Khatri是。。。这就解决了问题。这实际上是我第二次在重写组件以使用connect之后忘记取下大括号我将connect方法更改为导出默认的ConnectMapStateTops、mapDispatchToPropsSignup；因为控制台在抱怨语法。有了这些，我仍然可以得到这个.props.registerUser不是一个function@Kaleidics你能用你更新的代码更新你原来的帖子吗？我们可能遗漏了一些东西。@Kaleidics我认为他们的两套出口可能有问题，试着去掉上面的一套。谢谢Christopher Ngo的帮助，但我刚刚解决了这个问题。。。在将默认导出更改为“连接”后，我用大括号导入了它。@Kaleidics噢，哈哈。现在这是一个转折点。我希望你至少对mapDispatchToProps有所了解：

import Signup from 'path/to/Signup'