ReduxForm Decorator, kein Klassenzuweisungsfehler nach dem Auswerfen von create-react-app

Question

Ich habe vor kurzem meine create-react-app ausgeworfen und erhalte einen Fehler mit ReduxForm, der das Kompilieren des Webpacks verhindert. Hier ist der Fehler: "Fehler 'NewComplaintModal' ist eine Klasse keine Klassenzuweisung". Es scheint mit dem redux-Formulardekorator am unteren Rand verbunden zu sein, aber ich kann keine anderen Implementierungen in den redux-form-Dokumenten finden. Irgendeine Idee, wie man das repariert?

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import * as Actions from '../actions'; 
import { Field, reduxForm } from 'redux-form'; 
import DatePicker from "react-bootstrap-date-picker"; 

class NewComplaintModal extends Component { 
    close() { 
    this.props.actions.hideModal(); 
    } 

    handleFormSubmit(formProps) { 
    this.props.actions.submitComplaint(formProps); 
    } 

    render(){ 
    const { handleSubmit } = this.props; 

    const show = this.props.modalType ? true : false; 

    const RenderDatePicker = ({input, meta: {touched, error} }) => (
     <div> 
     <DatePicker showClearButton={false} {...input} /> 
     {touched && error && <span>{error}</span>} 
     </div> 
    ); 

    return(
     <div> 
     ... 
     </div> 
    ) 
    } 
} 

NewComplaintModal = reduxForm({ 
    form: 'newComplaintModal' 
})(NewComplaintModal); 


function mapStateToProps(state) { 
    return { 
    modal: state.modal 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(Actions, dispatch) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(NewComplaintModal) 

Answer 1

Zuerst Sie deklarieren eine Klasse NewComplaintModal wie diese

class NewComplaintModal extends Component { 
    ... 
} 

Dann rief, sind Sie Ihre NewComplaintModal Behandlung, die eine Klassendeklaration ist, wie es ist, eine Variable, wie folgt aus:

NewComplaintModal = reduxForm({ 
    form: 'newComplaintModal' 
})(NewComplaintModal); 

Aus diesem Grund sehen Sie den spezifischen Fehler, der sich über die Neuzuweisung einer Klasse beschwert. Um dies zu beheben, würde ich empfehlen, die mittlere Stufe Überspringen der reduxForm Dekorateur der Verwendung vor connect und verketten sie nur die Dekorateur Syntax:

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import * as Actions from '../actions'; 
import { Field, reduxForm } from 'redux-form'; 
import DatePicker from "react-bootstrap-date-picker"; 

export class NewComplaintModal extends Component { 
    close() { 
    this.props.actions.hideModal(); 
    } 

    handleFormSubmit(formProps) { 
    this.props.actions.submitComplaint(formProps); 
    } 

    render(){ 
    const { handleSubmit } = this.props; 

    const show = this.props.modalType ? true : false; 

    const RenderDatePicker = ({input, meta: {touched, error} }) => (
     <div> 
     <DatePicker showClearButton={false} {...input} /> 
     {touched && error && <span>{error}</span>} 
     </div> 
    ); 

    return(
     <div> 
     ... 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
    modal: state.modal 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(Actions, dispatch) 
    }; 
} 


// use decorators around an extension of your component 
// to plug into redux and redux-form 
@connect(mapStateToProps, mapDispatchToProps) 
@reduxForm({ form: 'newComplaintModal' }) 
export default class NewComplaintModalContainer extends NewComplaintModal {} 

Wenn Sie nicht über die Dekorateur Syntax verwenden möchten, können Sie etwas tun wie folgt aus:

export default connect(mapStateToProps, mapDispatchToProps)(
    reduxForm({ form: 'newComplaintModal' })(
    NewComplaintModal 
) 
) 

Dieser Ansatz dämmt im wesentlichen Ihre Komponente aus den Konfigurationsartigen Elementen, nämlich etwas zu Interaktion mit dem Anwendungszustand bezogen.

Hoffe, das hilft!

Answer 2

fand ich eine weniger als elegante Lösung: Statt einem nicht initialisierten NewComplaintModal, deklarieren Sie eine neue Variable mit einem anderen Namen und diese Variable auf den Rückgabewert der connect-Funktion übergeben.

Zum Beispiel:

const NewComplaintModalTemp = reduxForm({ 
    form: 'newComplaintModal' 
})(NewComplaintModal); 

export default connect(mapStateToProps, mapDispatchToProps)(NewComplaintModalTemp) 

Wenn jemand eine bessere Lösung hat oder will andere relevante Informationen teilen erklären zu helfen, warum dies notwendig ist, die sehr geschätzt werden würde.

Answer 3

@jake wies wieso Sie den Fehler erhalten.

Eine andere Möglichkeit, die Sie tun können, ist die Verwendung der compose Methode von Redux.

import { compose } from 'redux'; 
... 
export default compose(
    connect(mapStateToProps, mapDispatchToProps), 
    reduxForm({...}), 
)(NewComplaintModal);