redux-form 数据未传递给 handleSubmit

Question

我又遇到了 redux-form 的问题。我正在从父级调用 handleSubmit 函数，windows.alert() 被正确调用，但数据未传递给该函数。我做错了什么？

import React, {Component, PropTypes} from 'react';
import {reduxForm} from 'redux-form';
import memberValidation from './memberValidation';

class DashboardAdding extends Component {
  static propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    resetForm: PropTypes.func.isRequired
  }

  render() {
    const {
        fields: { pseudo, email},
        handleSubmit,
        resetForm
    } = this.props;
    return (
      <div>
        <form className="form-horizontal" onSubmit={handleSubmit.bind(this)}>
          <div className={'form-group' + (pseudo.error && pseudo.touched ? ' has-error' : '')}>
            <label className="col-sm-2">Pseudo</label>
            <div className={'col-sm-8 '}>
               <input type="text" className="form-control" id="pseudo" {...pseudo}/>
              {pseudo.error && pseudo.touched && <div className="text-danger">{pseudo.error}</div>}
          </div>
          </div>
          <div className={'form-group' + (email.error && email.touched ? ' has-error' : '')}>
             <label className="col-sm-2">Email</label>
            <div className={'col-sm-8 '}>
              <input type="text" className="form-control" id="email" {...email}/>
              {email.error && email.touched && <div className="text-danger">{email.error}</div>}
          </div>
          </div>
          <div className="form-group">
            <div className="col-sm-offset-2 col-sm-10">
              <button className="btn btn-success" onClick={handleSubmit}>
                <i className="fa fa-paper-plane"/> Submit
              </button>
              <button className="btn btn-warning" onClick={resetForm} style={{marginLeft: 15}}>
                <i className="fa fa-undo"/> Reset
              </button>
            </div>
          </div>
        </form>
      </div>
    );
  }
}
export default reduxForm({
  form: 'dashboardForm',
  fields: ['pseudo', 'email'],
  validate: memberValidation,
  asyncBlurFields: ['email']
})(DashboardAdding);

...以及调用 handleSubmit 的父级：

import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import Helmet from 'react-helmet';
import {bindActionCreators} from 'redux';
import {initialize} from 'redux-form';
import {isLoaded, loadMembers} from 'redux/modules/members/members';
import * as addActions from 'redux/modules/members/addSingleMember';
import {addMember} from 'redux/modules/members/addSingleMember';
import { DashboardList } from 'components';
import { DashboardHeader } from 'components';
import { DashboardAdding } from 'components';
import { asyncConnect } from 'redux-async-connect';

@asyncConnect([{
  deferred: true,
  promise: ({store: {dispatch, getState}}) => {
     if (!isLoaded(getState())) {
      return dispatch(loadMembers());
    }
  }
}])

class Dashboard extends Component {

  static propTypes = {
    members: PropTypes.array,
    error: PropTypes.string,
    loading: PropTypes.bool,
    addMember: PropTypes.func,
   initialize: PropTypes.func.isRequired
  }

  handleSubmit = (data, dispatch) => {
    window.alert(data);
    dispatch(addMember(JSON.stringify(data)));
    this.props.initialize('dashboardForm', {});
  }

  handleInitialize = () => {
    this.props.initialize('dashboardForm', {
      pseudo: 'Pibo',
      email: 'pibirino@gmail.com'
    });
  }

  render() {
    const {members} = this.props;
    return (
      <div className="container">
        <h1>Dashboard</h1>
        <Helmet title="Dashboard"/>
        <DashboardHeader />
        <div>
          <DashboardList members={members}/>
          <h3>Ici commence le form</h3>
          <div style={{textAlign: 'center', margin: 15}}>
            <button className="btn btn-primary" onClick={this.handleInitialize}>
              <i className="fa fa-pencil"/> Initialize Form
            </button>
          </div>
        </div>
        <DashboardAdding onSubmit={this.handleSubmit}/>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    members: state.members.data,
    error: state.members.error,
    loading: state.members.loading
  };
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators({
    addActions,
    addMember,
    initialize: initialize
  }, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(Dashboard);

redux 文档说： "You are upgrading from a previous version of redux-form that required that {valid: true} be returned"。我怀疑是这个问题，但我真的不明白那是什么意思！我的版本 -> "redux-form": "^3.0.0" 谢谢！

Answer 1

在我没想到的地方找到解决方案... 表格以json格式给出数据。 JSON.stringify() 搞砸了。

希望对大家有所帮助。再见

redux-form 数据未传递给 handleSubmit

redux-form data is not passed to handleSubmit

redux-form