状態を反応中の小道具にマッピングするときの未定義状態

Question

私のフォームの状態をLoginFormコンポーネントの小道具にマップしようとしていて、状態がundefinedと表示されています。 HERE

import React, { PropTypes } from 'react'; 
import { reduxForm, getFormValues } from 'redux-form/immutable'; 
import { connect } from 'react-redux'; 
import { logUserIn } from '../../actions/authentication'; 
import { VALID_EMAIL_REGEX } from '../../config/app_config'; 
import LoginForm from './LoginForm'; 

const FORM_ID = 'loginForm'; 

export class LoginFormContainer extends React.Component { 

    static propTypes = { 
    handleSubmit: PropTypes.func.isRequired, 
    submitting: PropTypes.bool.isRequired, 
    loginAction: PropTypes.func.isRequired, 
    values: PropTypes.object.isRequired, 
    }; 

    performLogin = (params) => { 
    const { loginAction } = this.props; 
    const credentials = { 
     email: params.email, 
     password: params.password, 
    }; 
    loginAction(credentials, '/home'); 
    } 

    render() { 
    const { handleSubmit, submitting, values, ...others } = this.props; 
    console.log(values); // <--- undefined 
    return (
     <LoginForm 
     handleSubmit={ handleSubmit } 
     loginFunction={ this.performLogin } 
     submitting={ submitting } 
     {...others} 
     /> 
    ); 
    } 
} 

// there is a validate method here 

LoginFormContainer = reduxForm({ 
    form: FORM_ID, // <--- loginForm 
    validate, 
})(LoginFormContainer); 

const mapStateToProps = (state) => { 
const values = getFormValues(FORM_ID)(state); 
    return { 
    values, 
    }; 
}; 

export default connect(mapStateToProps, { 
    loginAction: logUserIn, 
})(LoginFormContainer); 

はLoginFormコンポーネントです：

import React, { PropTypes } from 'react'; 
import { Field, Form } from 'redux-form/immutable'; 
import { getClassName } from '../../utils/forms'; 
import { Link } from 'react-router'; 
// import { checkButtonDisabled } from '../../utils/forms'; 

const renderInput = ({ input, label, type, meta: { touched, error } }) => { 
    return (
    <div className={ getClassName(touched, error) }> 
     <label className="form-control-label"> 
     { label }&nbsp; 
     {touched && error && 
     <span className="error">{ error }</span>} 
     </label> 
     <input 
     { ...input } 
     className="form-control form-control-success" 
     type={ type } 
     /> 
    </div> 
); 
}; 

export default class LoginForm extends React.Component { 

    static propTypes = { 
    handleSubmit: PropTypes.func.isRequired, 
    loginFunction: PropTypes.func.isRequired, 
    submitting: PropTypes.bool.isRequired, 
    }; 

    render() { 
    const { 
     handleSubmit, 
     loginFunction, 
     submitting } = this.props; 
    return (
     <Form id="loginForm" onSubmit={ handleSubmit(loginFunction.bind(this)) }> 
     <fieldset> 
      <Field 
      name="email" 
      component={renderInput} 
      type="text" 
      placeholder="example@exampledomain.com" 
      label="Email address" 
      /> 
      <Field 
      name="password" 
      component={renderInput} 
      type="password" 
      placeholder="your password" 
      label="Password" 
      /> 
     </fieldset> 
     <button 
      type="submit" 
      className="btn btn-primary" 
      disabled={ submitting } 
     > 
      Log In 
     </button>&nbsp; 
     <Link to="/forgot-password">Forgot Password?</Link> 
     </Form> 
    ); 
    } 
} 

私は小道具にだけ状態をマッピングし、それをログコンソール場合、それはまたundefinedとして戻ってきます。

私は、送信ボタンの条件を無効にするための値を取得しようとしていますが、状態が未定義のため、フォームの値を取得するためにredux-formメソッドを実行するフォーム状態にアクセスできません。ここで

は、状態の写真です：

誰もが問題になる可能性がどのようなスポット？

Answer 1

は、アプリケーションのどこにいても使用できる状態ですか？ const {form} = stateの直後にデバッガを置くと、コンソール上にある "フォーム"が何であるかをチェックすると、全体が未定義ですか？

もしそうなら、あなたの問題は減速器の設定であると思います。

もしそうでなければ、そのオブジェクトはどのように見えますか？たぶんstate.loginForm.valuesは何らかの形で間違っています（より深く入れ子にされているか、あまり深くないか、フィルタリングする必要がある配列があります）。

Answer 2

フォームが

import { getFormValues } from 'redux-form'; 
... 
let values = getFormValues('myFormName')(state); 

はまた、あなたのフォームがReduxの-形で注入されたすべての小道具を持っていることを確認するヨールLoginFormまで小道具を渡してください値を取得するためにReduxのフォームgetFormValuesセレクタを使用してみてください。

render() { 
    const { handleSubmit, submitting, values, ...others } = this.props; 
    console.log(values); // <--- undefined 
    return (
     <LoginForm 
     handleSubmit={ handleSubmit } 
     loginFunction={ this.performLogin } 
     submitting={ submitting } 
     {...others} 
     /> 
    ); 
    }