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

Question

我正在尝试将表单的状态映射到我的 LoginForm 组件的 props，并且状态显示为 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>
    );
  }
}

如果我只是将状态映射到 props 并在控制台记录它，它也会返回为 undefined。

我正在尝试获取值以在我的提交按钮上设置条件以禁用但我无法访问表单状态以运行任何 redux-form 方法来获取表单值，因为状态未定义。

这是该州的图片：

有人发现可能是什么问题吗？

Answer 1

您的状态在您的应用程序中的任何位置都可用吗？如果你在 const { form } = state; 之后放置一个调试器；并检查控制台中的“表单”是什么，整个事情是未定义的吗？

如果是这样，我猜你的问题出在减速器设置上。

如果不是，该对象是什么样的？也许 state.loginForm.values 在某些方面是不正确的（嵌套更深，或更深，或者有一个你必须过滤的数组）。

Answer 2

请尝试使用 Redux-Form getFormValues 选择器获取表单值

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

另外请将 props 传递给你的 LoginForm 以确保你的表单具有由 redux-form 注入的所有 props：

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