상태를 반응에서 소품으로 매핑 할 때의 상태가 정의되지 않았습니다.

Question

내 양식의 상태를 LoginForm 구성 요소의 소품에 매핑하려고 시도 중 상태가 undefined으로 표시됩니다. 난 그냥 로그 소품 단지 상태를 매핑하고 콘솔 경우

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로 제공 : 여기

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 구성 요소입니다.

내 제출 단추에서 조건을 설정하기 위해 값을 가져 오려고하지만 상태가 정의되지 않았으므로 양식 값을 얻기 위해 redux 양식 메서드를 실행하기 위해 양식 상태에 액세스 할 수 없습니다.

사람이 문제가 될 수있는 것을 발견 : 여기

은 국가의 사진을입니까?

Answer 1

은 애플리케이션의 어느 곳에서나 사용할 수있는 상태입니까? 당신이 const {form} = state 바로 다음에 디버거를 넣으면; 콘솔에 "양식"이 무엇인지 확인하고 전체 내용이 정의되지 않았습니까?

그렇다면 감속기 설정에 문제가 있다고 생각합니다.

그렇지 않다면 그 개체는 어떻게 생겼을까요? 아마도 state.loginForm.values는 어떤 식 으로든 (더 깊게 중첩되거나 덜 깊게 중첩되거나 필터링해야하는 배열이) 올바르지 않습니다.

Answer 2

양식에 REDUX 형태로 주입 모든 소품이 있는지 확인하기 위해

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

은 또한을 yor LoginForm에 소품을 통과하십시오 양식 값을 얻기 위해 돌아 오는 형식을 getFormValues 선택기를 사용하여 시도하십시오 :

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

을