Funktion ist keine Funktion in React-Router

Question

Ich erstelle ein einfaches Anmeldeformular für meine Website. Aber ich habe ein kleines Problem.

Wenn ich Login und Passwort eingeben und versuchen, es zu Server senden bekam ich Fehler

Uncaught TypeError: this.props.signinUser is not a function

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

und Aktionen.

import axios from 'axios'; 


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

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

}; 

} 

und schließlich Reducer.

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

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


export default rootReducer; 

ich reagieren 16 verwenden, reagieren Redux v5 und reagieren-Router v3, reagieren Form v7!

Ich denke, sein Problem mit Connect-Funktion von ReactForm!

Answer 1

Das Problem liegt hier

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

Diese

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

sollten Sie müssten der Anruf this.props.signinUser-this.props.actions.signinUser Weitere Daten ändern: https://redux-form.com/7.0.4/docs/faq/howtoconnect.md/