reactjs - ReduxForm 装饰器，弹出 create-react-app 后出现无类分配错误

Question

我最近弹出了 create-react-app，并且收到了 ReduxForm 的错误，该错误阻止了 webpack 编译。这是错误:“错误‘NewComplaintModal’是一个没有类分配的类”。它似乎与底部的 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
  )
)

这种方法本质上将您的组件与类似配置的元素(即与应用程序状态交互相关的任何元素)隔离开来。

希望这有帮助!