reactjs – ReduxForm装饰器,弹出create-react-app后没有类分配

发布时间：2020-12-15 09:33:18 所属栏目：百科来源：网络整理

导读：我最近弹出了我的create-react-app,我收到ReduxForm的错误,阻止了webpack编译.这是错误：“错误’NewComplaintModal’是一个类no-class-assign”.它似乎与底部的redux表单装饰器相关联,但我在redux-form文档中找不到任何其他实现.知道如何解决这个问题吗？ i

我最近弹出了我的create-react-app,我收到ReduxForm的错误,阻止了webpack编译.这是错误：“错误’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)

解决方法

首先,你要声明一个名为NewComplaintModal的类

class NewComplaintModal extends Component {
  ...
}

然后,你正在处理你的NewComplaintModal,这是一个类声明,就像它是一个变量,如下所示：

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

这就是为什么你会看到特定的错误,即抱怨正在重新分配一个类.要解决这个问题,我建议在连接之前跳过使用reduxForm装饰器的中间步骤,并使用装饰器语法链接它们：

import React,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,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
  )
)

这种方法基本上将组件与类似配置的元素隔离开来,即与应用程序状态交互相关的任何内容.

希望这可以帮助！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!