连接反应 redux HOC 出现“无法将类作为函数调用”的错误

Question

下面我的 HOC 有什么问题？出现无法将类调用为函数的错误？

https://i.imgur.com/SirwcGZ.png

我的 HOC

const CheckPermission = (Component) => { 
    return class App extends Component { 
        componentDidMount() {
            this.props.fetchUsers().then(resp => {
                this.setState({user: true, loading: false});
            })
        } 
        render() { 
           const { user, loading } = this.props

           loading && <div>Loading...</div>

           !user && <Redirect to="/dashboard" />

           return <Component {...this.props} />
        }
    } 
}


export default connect(state=>state.global, {fetchUsers})(CheckPermission)

这就是我导入和使用 CheckPermission 的方式：

<Route exact path='/dashboard' component={CheckPermission(Dashboard)} />

Answer 1

你不能用connect 包裹checkPermissions，因为它也是一个HOC。 相反，您必须编写它们。

import { compose } from 'redux';

...

export default compose(
  connect(state=>state.global, {fetchUsers}),  
  CheckPermission
);