Redux形式：MapStateToProps打破形式

該Redux表單中的MapStateToProps的目標是檢查用戶是否在數據庫中，並將validuser狀態返回給提交的表單，以便我可以呈現錯誤消息或者將用戶重定向到主頁。問題是，當我嘗試將MapStateToProps連接到窗體時，它會引發錯誤。Redux形式：MapStateToProps打破形式

終極版形式：

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)

任何人都可以提出建議如何調試這個問題？

來源

2017-04-02 Paul

首先，mapStateToProps不是redux形式的唯一東西，它來自redux/react-redux。

代碼的問題在於，您將SignIn組件傳遞給connect函數，而不是您剛剛創建的redux-form的HOC組件。

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

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

SignIn不是終極版狀部件，所以它不會有handleSubmit功能。

你想要的是這樣的：

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

來源

2017-04-03 00:31:17

這裏的問題在於，您將原始組件傳遞到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);

來源

2017-04-03 00:29:59

Redux形式：MapStateToProps打破形式

回答

相關問題