函數不是React-Router中的函數

Question

我爲我的網站創建簡單的登錄表單。 但我有一個小問題。

當我輸入登錄名和密碼，並嘗試將其發送到服務器，我得到錯誤

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

和行動。

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，反應還原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/