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>
    );
  }
}

如果我只是将状态映射到props并且控制台记录它，它也会以undefined的形式返回。

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

这是一张州的照片：

有人发现可能出现的问题吗？

Answer 1

您的申请表中的州是否可以使用？如果你在const {form} = state之后放一个调试器;并查看＆＃34;表格＆＃34;在控制台中，整个事物是不确定的？

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

如果没有，该对象是什么样的？也许state.loginForm.values在某种程度上是不正确的（嵌套得更深，或者更深，或者你需要过滤一个数组）。

Answer 2

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

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

另外请将道具传递给您的LoginForm，以确保您的表单包含所有由redux-form注入的道具：

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

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

2 个答案: