Question

我正在使用HOC来使用HOC渲染React组件并收到上述错误。

该组件看起来像这样

import React, { Component } from 'react'
import { hot } from 'react-hot-loader'
import withDashboardForm from './../form/withDashboardForm'

class LoginForm extends Component {
  render() {
    return (
      <form id="login-form" className="dashboard-form" method="post" onSubmit={(e) => this.props.handleSubmit(e)} encType="multipart/form-data">
        .. form definition goes here
      </form>
    )
  }
}

export default hot(module)(withDashboardForm(LoginForm))

这是HOC：

    const withDashboardForm = (WrappedComponent) => {
      return class ComponentWithDashboardForm extends Component {

        constructor(props) {
          super(props)
          ...
        }

        componentDidMount() {
          ...
        }

        handleChange(e) {
          ..
        }

        handleSubmit(e) {
          ...
        }

        render() {
          return (
            <WrappedComponent
              {...this.props}
              {...this.state}
              handleChange={this.handleChange}
              handleSubmit={this.handleSubmit}

            />
          )
        }

      }
    }

    export default hot(module)(withDashboardForm)

最后，React Router的render方法用于像这样渲染组件

<Route exact path="/teacher/login" render={(props) => <LoginForm {...props} handler={new LoginFormHandler()}/>}/>

当我运行npm start时，一切都会按预期进行（它运行“ NODE_ENV =生产节点./dist/server.genic.js”）。

但是当我使用运行“ node /home/ubuntu/node/ris/dist/server.genic.js”的pm2启动服务器时，我看到上面标题中提到的TypeError。

Answer 1

此错误可能来自export default hot(module)(withDashboardForm)。这将返回一个类，但是您正在export default hot(module)(withDashboardForm(LoginForm))中将该类用作函数。

有两种可能的解决方案：

请勿在HOC上使用hot(module)
使用new实例化班级，例如export default hot(module)(new withDashboardForm(LoginForm))

入门TypeError：当我使用React HOC时无法将类作为函数调用

1 个答案: