redux-form data wird nicht an handleSubmit übergeben

Question

Ich habe wieder Probleme mit Redux-Form. Ich rufe die handleSubmit -Funktion von der Eltern, und die windows.alert() wird korrekt aufgerufen, aber die Daten werden nicht an die Funktion übergeben. Was mache ich falsch?

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

... und die Eltern die handleSubmit Aufruf:

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

Die Redux-Dokumentation sagt: „Sie sind von einer früheren Version von redux-Formular aktualisieren, dass {gültig erforderlich: true } zurück". Ich vermute, dass das Problem ist, aber ich verstehe wirklich nicht, was das bedeuten könnte! Meine Version -> "redux-form": "^ 3.0.0" Danke!

Answer 1

Finden Sie die Lösung, wo ich nicht erwartet habe ... Das Formular gibt die Daten im JSON-Format. JSON.stringify() hat es vermasselt.

Ich hoffe, es kann jemandem helfen. Tschüss