Question

我为我的网站创建简单的登录表单。但我有一点问题。

当我输入登录名和密码并尝试将其发送到服务器时出现错误

未捕获的TypeError：this.props.signinUser不是函数

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import * as actions from '../../actions';

class Signin extends Component{

constructor(props){
super(props);
this.state= {};
this.onSubmit = this.onSubmit.bind(this);
}

renderField(field){
    return(
    <div className="form-group">
        <label>{field.label}</label>
        <input
            className="form-control"
            type="text"
            {...field.input}
            />

    </div>
    );
}

onSubmit(e){
    e.preventDefault();
    let {login,password} = this.state;
    //this.props.login(login,password);
    console.log({login,password});
    this.props.signinUser({login,password});
    this.setState({
        login: '',
        password: ''
    })
}




render(){
    let {login,password} = this.state;


    return(
        <form onSubmit={this.onSubmit}>

            <Field
                label="Login:"
                name="login"
                component={this.renderField}
                onChange={e => this.setState({login: e.target.value})}
            />
            <Field
                label="Password:"
                name="password"
                component={this.renderField}
                onChange={e => this.setState({password: e.target.value})}
            />
            <button action="submit" className="btn btn-primary"> Sign In </button>
        </form>

    );
}
}


function mapStateToProps(state) {
return { form: state.form };
}

export default reduxForm({
form: 'signin'
}, mapStateToProps, actions)(Signin);

和行动。

import axios from 'axios';


export function signinUser({login,password}){
return function(dispatch){

    axios.post('http://localhost:8080/auth', { login, password});

};

}

最后是减速机。

import { combineReducers } from 'redux';
import { reducer as fromReducer } from 'redux-form';

const rootReducer = combineReducers({
form: fromReducer
});


export default rootReducer;

我使用反应16，反应redux v5和反应路由器v3，反应形式v7！

我认为它与ReactForm的连接功能有关！

Answer 1

问题出在这里

export default reduxForm({
form: 'signin'
}, mapStateToProps, actions)(Signin);

这应该是

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
....
 //remainder of the code
....
mapDispatchToProps =(dispatch)=>{
return {
    actions : bindActionCreators(actions , dispatch)
};
}
Signin= connect(
    mapStateToProps,
    mapDispatchToProps 
)(Signin);

 export default reduxForm({
    form: 'signin'
    })(Signin);

您需要将通话this.props.signinUser更改为this.props.actions.signinUser 更多信息：https://redux-form.com/7.0.4/docs/faq/howtoconnect.md/

函数不是React-Router中的函数

1 个答案: