Reduxフォーム：MapStateToPropsがフォームを破棄しています

Question

このReduxフォームのMapStateToPropsの目標は、ユーザーがデータベースにいるかどうかを確認し、validuser状態を送信済みフォームに戻してエラーメッセージを表示するか、またはユーザーをホームページにリダイレクトすることができます。問題は、MapStateToPropsをフォームに接続しようとすると、エラーがスローされることです。

Reduxのフォーム：

import React, { Component } from "react"; 
import { connect } from 'react-redux'; 
import { reduxForm, Field, Form, reset } from "redux-form"; 
import { Link } from 'react-router-dom'; 
import { checkUser } from "../actions/index"; 


class SignIn extends Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     user: { 
     validUser: { 
      username: null, 
      validUser: null 
     } 
     } 
    } 
    } 

    onSubmit = (props) => { 
    this.props.dispatch(checkUser(props)); 
    } 

    render() { 
    const { handleSubmit, reset } = this.props; 

    return(
     <div> 
     <form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }> 
     <h3>Sign In!</h3> 

     <div> 
      <label><h3>Username</h3></label> 
      <div> 
      <Field name="username" component="input" type="text" /> 
      </div> 
     </div> 

     <div> 
      <label><h3>Password</h3></label> 
      <div> 
      <Field name="password" component="input" type="password" /> 
      </div> 
     </div> 

     <button type="submit" className="btn btn-primary">Submit</button> 
     <button><Link to="/me" className="btn btn-danger">Cancel</Link></button> 
     </form> 

    </div> 
    ) 
    } 
}; 

function mapStateToProps(state) { 
    return { 
    user: state.user.validUser 
    }; 
}; 

let signInForm = reduxForm(
    { form: "signInForm" })(SignIn); 


export default signInForm = connect(mapStateToProps, null)(SignIn); 

しかし、私は次のエラーを取得する：

Uncaught TypeError: handleSubmit is not a function 
    at SignIn.render (signin.js:33) 
    at ReactCompositeComponent.js:796 
    at measureLifeCyclePerf (ReactCompositeComponent.js:75) 
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795) 
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822) 
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362) 
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) 
    at Object.mountComponent (ReactReconciler.js:46) 
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371) 
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258) 

誰もがこの問題をデバッグするに助言することはできますか？

Answer 1

まず、mapStateToPropsはredux/react-reduxからのreduxフォーム専用のものではありません。

コードの問題は、SignInコンポーネントを接続関数に渡していて、あなたが作成したredux-formのHOCコンポーネントではありません。

let signInForm = reduxForm(
    { form: "signInForm" })(SignIn); 

export default signInForm = connect(mapStateToProps, null)(SignIn); 

SignInがhandleSubmit機能を持たないようにReduxの形式の構成要素ではありません。何をしたい

はこれです：

export default connect(mapStateToProps, null)(signInForm); 

Answer 2

ここでの問題は、元のコンポーネントをconnectに渡していることです。これを書くために

const ReduxFormSigninForm = reduxForm({ form: "signInForm" })(SignIn); 

const connected ReduxFormSigninForm = connect(mapStateToProps)(ReduxFormSigninForm); 

代替の方法は、あなたが再来からインポートできる、composeを使用することです。

import { compose } from 'redux'; 

export default compose(
    connect(mapStateToProps), 
    reduxForm({ form: "signInForm" }) 
)(SignIn);