Redux状态在将状态映射到反应中的道具时未定义

Question

我试图将我的窗体的状态映射到我的LoginForm组件的道具，状态显示为undefined。

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

请尝试使用终极版表格getFormValues选择让表单值

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

还请绕道道具到侑LoginForm的，以确保您的形式有通过终极版形式注入的所有道具：

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