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

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

import { compose } from 'redux';

...

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

connect react redux HOC得到了“不能将类称为函数”的错误

1 个答案: