TypeError：无法将类作为函数调用（React / Redux）

Question

I am putting together my first Redux/React app, and when connecting my first containers I get this error. I have looked over past posts on this same error and I have gone through each answer in detail to find if I am making the same mistakes, namely forgetting to extend component, or double exporting. I am not doing either so hopefully some other eyes may find another reason that is not previously listed.

The error does not clearly indicate which file is kicking off the error, but here are the only files that could be involved.

The full error is as follows:

typeError: Cannot call a class as a function
_classCallCheck
node_modules/react-redux/es/components/connectAdvanced.js:3
  1 | var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  2 | 
> 3 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  4 | 
  5 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  6 | 

navDrawer.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core';
import {SwipeableDrawer, Button} from '@material-ui/core'
import {} from '@material-ui/icons';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {toggleDrawer} from '../actions/index';
import compose from 'recompose/compose';

const styles = {
    list: {
      width: 250,
    },
    fullList: {
      width: 'auto',
    },
  };

  class NavDrawer extends Component {
      constructor(props){
          super(props);
      }
    state = {
      left: false,

    };



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

      const sideList = (
        <div className={classes.list}>
          <List>Hello 1</List>
          <Divider />
          <List>Hello 2</List>
        </div>
      );

      const fullList = (
        <div className={classes.fullList}>
          <List>Hello 4</List>
          <Divider />
          <List>Hello 3</List>
        </div> 
      );

      return (
        <div>
          //<Button onClick={this.props.toggleDrawer('left', true)}>Open Left</Button>

          <SwipeableDrawer
            open={this.state.left}
            onClose={this.props.toggleDrawer('left', false)}
            onOpen={this.props.toggleDrawer('left', true)}
          >
            <div
              tabIndex={0}
              role="button"
              onClick={this.props.toggleDrawer('left', false)}
              onKeyDown={this.props.toggleDrawer('left', false)}
            >
              {sideList}
            </div>
          </SwipeableDrawer>

        </div>
      );
    }
  }

  NavDrawer.propTypes = {
    classes: PropTypes.object.isRequired,
  };

  function mapDispatchToProps(dispatch){
    return bindActionCreators({toggleDrawer}, dispatch)
  }

  function mapStateToProps({drawer}){
    return {drawer};
  }

  export default compose(withStyles(styles), connect(mapStateToProps, mapDispatchToProps)(NavDrawer));

navBar.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {toggleDrawer} from '../actions/index';
import compose from 'recompose/compose';


    const styles = {
        root: {
          flexGrow: 1,
        },
        flex: {
          flex: 1,
        },
        menuButton: {
          marginLeft: -12,
          marginRight: 20,
        },
      };


class NavBar extends Component {
  constructor(props){
    super(props);
  }
  render(){
    const { classes } = this.props;
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton onClick={this.props.toggleDrawer('left', true)} className={classes.menuButton} color="inherit" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="title" color="inherit" className={classes.flex}>
            MentalHealthApp
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
  }

}

NavBar.propTypes = {
  classes: PropTypes.object.isRequired,
};
function mapDispatchToProps(dispatch){
  return bindActionCreators({toggleDrawer}, dispatch)
}

function mapStateToProps({drawer}){
  return {drawer};
}

export default compose(withStyles(styles), connect( mapStateToProps, mapDispatchToProps)(NavBar));

Mahalo for your help

Answer 1

Make sure, you're using the correct syntax of recompose .

export default compose(
    withStyles(styles),
    connect(mapStateToProps, mapDispatchToProps)
)(NavDrawer);

---

Another syntax without recompose :

export default connect(
   mapStateToProps, 
   mapDispatchToProps
)(withStyles(NavDrawer));

Answer 2

如果您到达这里，自动完成功能也可能使您感到reactComponent.prototype = {...} ……我在做reactComponent.prototype = {...} ，而不是reactComponent.propTypes = {...}