ReduxFormデコレータ、create-react-appを取り出した後のno-class-assignエラー

Question

最近、私はcreate-react-appを取り出しました。ここにエラーがあります： "エラー 'NewComplaintModal'はクラスno-class-assignです"。下のreduxフォームデコレータに関連付けられているようですが、redux-formドキュメントでは他の実装は見つかりません。どのようにこれを修正するための任意のアイデア？

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

まず、あなたが次にNewComplaintModal

このような

class NewComplaintModal extends Component { 
    ... 
} 

と呼ばれるクラスを宣言している、あなたはそれがこのように、変数のように、クラス宣言である、あなたのNewComplaintModalを処理している：

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

これは、クラスが再割り当てされていると不平を言う特定のエラーが表示される理由です。この問題を解決するために、私はconnect前reduxFormデコレータを使用して、ちょうどデコレータ構文を使用して、連鎖の途中のステップをスキップ推薦：

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 {} 

あなたはデコレータ構文を使用したくない場合は、あなたが何かを行うことができますこのように：

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

このアプローチは、本質的に、アプリケーションの状態との相互作用に関連するもの、すなわち、設定状要素からコンポーネントを絶縁します。

希望すると便利です。

Answer 2

私はより少なくよりエレガントな解決策を見つけた：代わりに初期化されていないNewComplaintModalの、別の名前で新しい変数を宣言し、connect関数の戻り値にその変数を渡します。例えば

：誰もがよりよい解決策を持っているか、これは非常に高く評価されるだろうことが必要である理由を説明するための他の関連の情報を共有したい場合は

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

export default connect(mapStateToProps, mapDispatchToProps)(NewComplaintModalTemp) 

。

Answer 3

@jakeeはエラーが発生した理由を指摘しました。

もう1つの方法は、compose還元法を使用することです。

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