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

Mahalo的帮助

Answer 1

请确保您使用的是recompose。

的正确语法

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

没有recompose的另一种语法：

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

Answer 2

如果您已经降落在这里，自动完成功能也可能使您感到困惑……我在做 reactComponent.prototype = {...}而非reactComponent.propTypes = {...}

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

2 个答案: