React/Redux报错：Cannot call a class as function 排查求助

我帮你定位到问题啦！这个错误是因为你使用compose组合高阶函数的时候写法有误导致的，下面来详细说明：

问题原因 #

compose的作用是按顺序组合多个高阶函数，它接收的每一个参数都应该是高阶函数本身，而不是已经用高阶函数包装过组件的结果。

看你当前的导出代码：

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

这里connect(mapStateToProps, mapDispatchToProps)(NavDrawer)已经是把NavDrawer包装后的类组件了，当compose尝试把它当作函数去调用时，就会抛出"Cannot call a class as function"的错误——毕竟类组件是不能像普通函数那样直接调用的。

修复方案 #

把connect作为compose的一个参数传入，最后再统一调用组合后的函数来包装组件，修改后的代码如下：

navDrawer.js 的导出部分 #

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

navBar.js 的导出部分 #

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

额外小提示 #

另外注意你代码里的一个小问题：

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

这种写法会导致组件每次渲染时就直接执行toggleDrawer，而不是点击按钮时才执行。正确的写法应该用箭头函数包裹：

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

这样才能保证只有点击按钮时才会触发对应的action，避免不必要的重渲染。

内容的提问来源于stack exchange，提问作者Quinlayen