redux-form handleSubmit 不发送表单数据答案

【问题标题】：redux-form handleSubmit not sending form dataredux-form handleSubmit 不发送表单数据
【发布时间】：2017-03-21 15:17:32
【问题描述】：

handleSubmit() 没有发送表单数据。出于某种原因，字段的配置对象似乎是undefined，尽管我相信我正确连接了redux-form。

LoginComponent.js

import { reduxForm } from 'redux-form';

import '../others/styles.css';

const FIELDS = {
  username: {
    type: 'input',
    label: 'Enter username'
  },
  password: {
    type: 'input',
    label: 'Enter password'
  }
};

const Login = (props) => {
  console.log('--------- props: ', props);

  const { fields: { username, password }, handleSubmit, setUsernameAndPassword } = props;

  console.log('-------- username: ', username); // PROBLEM: Returns undefined when it should return the config object for this field
  return (
    <div>
      <Form onSubmit={ handleSubmit(setUsernameAndPassword.bind(this)) } id='login'>
        <Form.Field>
          <label>Username</label>
          <input {...username}
            name='username' />
        </Form.Field>

....

Login.propTypes = {
  handleSubmit: React.PropTypes.func,
  fields: React.PropTypes.array,
  setUsernameAndPassword: React.PropTypes.func
};

export default reduxForm({
    form: 'LoginForm',
    fields: Object.keys(FIELDS)
})(Login);

LoginContainer.js

import { connect } from 'react-redux';
import { graphql } from 'react-apollo';

import Login from '../components/LoginComponent';
import LoginMutation from '../graphql/LoginMutation.gql';
import { types as typesAuth } from '../reducers/auth';

const gqlLogin = graphql( LoginMutation, {
  props: ({mutate}) => ({
    login: async function loginWithUsernameOrEmail(variables) {
      try {
        const result = await mutate({variables});
      } catch (err) {
        console.log('GQL Error: ', err);
      }
    }
  })
})(Login);

export default connect(
  state => ({
    isLoggedIn: state.auth.isLoggedIn
  }),
  dispatch => ({
    setUsernameAndPassword: (data) => { // PROBLEM: Why is data empty??
      console.log('--------- data: ', data);
      dispatch({
        type: typesAuth.SET_USERNAME_PASSWORD,
        payload: {
          username: data.username,
          password: data.password
        }
      });
    }
  }),
)(gqlLogin);

reducers/index.js

import { reducer as auth } from './auth';
import { reducer as formReducer } from 'redux-form';

export default {
  auth,
  form: formReducer
};

reducers.js

// Modules
import appReducers from '../modules/root/reducers/';
import authReducers from '../modules/auth/reducers/';

module.exports = {
  ...appReducers,
  ...authReducers
};

redux.js

// Imports
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';

// Reducers
import Client from './client';
import reducers from './reducers';

const devtools = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

module.exports = createStore(
  combineReducers({
    ...reducers,
    apollo: Client.reducer()
  }),
  compose(
    applyMiddleware(Client.middleware()), devtools()
  ),
);

auth.js

// Constants
export const types = Object.freeze({
  SET_USERNAME_PASSWORD: 'AUTH/SET_USERNAME_PASSWORD'
});

// Default State
const DEF_STATE = {
  isLoggedIn: false,
  username: null,
  password: null
};

export const reducer = (state = DEF_STATE, action) => {
  let newState;
  switch (action.type) {
    ...
    case types.SET_USERNAME_PASSWORD:
      newState = {
          ...state,
          username: action.payload.username,
          password: action.payload.password
      };
      break;
    default:
      newState = state;
  }
  return newState;
};

【问题讨论】：

你有没有在表单中使用 button type = 'submit' 来提交表单
我没有通读整个代码，但我发现了一些问题。在您的 LoginComponents.js 中，您将字段的 propType 定义为数组，但在进行解构时，您将字段视为对象，即 {usrnm, pwd}。我猜，[ursnm, pwd] 应该修复它。您可以在此处阅读有关数组解构的更多信息 - developer.mozilla.org/en/docs/Web/JavaScript/Reference/…。看看底部的示例，它在解构时混合了数组和对象。
@JayantPatil 是的，我有来自semantic-ui-react 的<Button type='submit'>
@AbhilashSingh 我为这样的字段更改了 PropTypes：export default reduxForm({ form: 'LoginForm', fields: Object.keys(FIELDS) })(Login);
@jenna，是的，所以确实你正在传递一个键数组。但是在解构（console.log('----- props', props) 之后的行）时，您似乎将字段视为一个对象，而它实际上是一个数组。要解构数组，您应该使用 fields = [username, pwd]。请参阅数组解构。它的语法与对象解构不同。

标签： node.js reactjs redux graphql redux-form

【解决方案1】：

您需要使用 redux-form 中的 Field 组件将各个输入绑定到 redux 存储 (see docs)。

redux-form 文档中的The "Simple Form" Example 很好地演示了如何执行此操作，只需从redux-form 导入Field 组件并使用它来描述您的输入。在你的情况下，它会是这样的：

import { reduxForm, Field } from 'redux-form';

const Login = (props) => {
  console.log('--------- props: ', props);

  const { handleSubmit, isLoggingIn, setUsernameAndPassword } = props;

  return (
    <div>
      <Form onSubmit={ handleSubmit(setUsernameAndPassword.bind(this)) } id='login'>
        <Form.Field>
          <label>{i18n.t('auth.username')}</label>
          <Field
            component="input"
            name="username"
            placeholder={i18n.t('utils.and',{item1: i18n.t('auth.username'), item2: i18n.t('auth.email')})}
          />
        </Form.Field>

....

希望这会有所帮助！

【讨论】：