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，并且看来Signup组件仍然没有支持或分发。

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'

React Redux，未捕获的TypeError：尝试分派表单提交时this.props.dispatch不是一个函数？

2 个答案: