TypeError: Невозможно вызвать класс как функцию (React / Redux)

Question

Я собираю свое первое приложение Redux / React, и при подключении моих первых контейнеров я получаю эту ошибку.Я просмотрел прошлые сообщения об этой же ошибке и подробно рассмотрел каждый ответ, чтобы выяснить, делаю ли я те же ошибки, а именно забыть о расширении компонента или двойном экспорте.Я не делаю ни того, ни другого, надеюсь, некоторые другие глаза могут найти другую причину, которой ранее не было в списке.

Ошибка не ясно указывает, какой файл вызывает ошибку, но вот единственные файлы, которые могут быть вовлечены.

Полная ошибка выглядит следующим образом:

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));

Махало для вашегопомощь

Answer 1

Если вы приземлились здесь, автозаполнение, возможно, и вас испортило ... Я делал reactComponent.prototype = {...} вместо reactComponent.propTypes = {...}

Answer 2

Убедитесь, что вы используете правильный синтаксис recompose.

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

---

Другой синтаксис без recompose:

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