connect response redux HOC получил ошибку «Невозможно вызвать класс как функцию»

avatar
Madeline Ries
8 апреля 2018 в 12:23
1521
1
4

Что не так с моим 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)} />

Источник

Ответы (1)

avatar
zied hajsalah
8 апреля 2018 в 13:19
6

вы не можете обернуть checkPermissions с connect, потому что это также HOC. Вместо этого вы должны составить их.

import { compose } from 'redux';

...

export default compose(
  connect(state=>state.global, {fetchUsers}),  
  CheckPermission
);
Madeline Ries
8 апреля 2018 в 13:26
0

та же ошибка, которую я все еще получаю, это мой полный файл pastebin.com/HRdthN80

zied hajsalah
8 апреля 2018 в 13:30
0

в строке 7, почему вы добавляете фигурные скобки вокруг Component

zied hajsalah
8 апреля 2018 в 13:32
0

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

Madeline Ries
8 апреля 2018 в 13:35
0

Я удалил фигурные скобки, и теперь это сработало, имеет ли значение порядок составления аргументов?

zied hajsalah
8 апреля 2018 в 13:39
0

да, потому что compose передает результат второй функции первой, а в checkPermission нужны реквизиты, переданные connect.

Madeline Ries
8 апреля 2018 в 13:41
0

но я попытался изменить порядок, это не работает, я поставил CheckPermission в качестве второго аргумента, это сработало, вы можете проверить это еще раз? ваше предыдущее решение сработало.

zied hajsalah
8 апреля 2018 в 13:43
0

откуда берется appliedAd?

ValRob
28 августа 2019 в 10:02
0

А если я не использую редукс??