TypeError:导出页面时，Object(...)不是函数 [英] TypeError: Object(...) is not a function when exporting page

问题描述

我是Reactjs的新手，目前正在关注本教程( https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/#react-firebase-protected-routes )有关使用React和Firebase进行身份验证的内容，但目前为止一个奇怪的错误.

I'm new with Reactjs and currently following this tutorial (https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/#react-firebase-protected-routes) about authentication with react and firebase, but at this point a got this strange error.

TypeError: Object(...) is not a function
Module../src/containers/Autenticacao/Conta/index.jsx
src/containers/Autenticacao/Conta/index.jsx:17
  14 | 
  15 | const condition = authUser => !!authUser;
  16 | 
> 17 | export default withAuthorization(condition)(AccountPage);

我不确定是什么原因，因为在终端中没有错误，只是进入了页面.

I'm not sure what's the reason because I got no error in the terminal, just acessing the page.

这是整个代码的样子:

import React from 'react';

import { PasswordForgetForm } from '../PasswordForget';
import PasswordChangeForm from '../PasswordChange';
import { withAuthorization } from '../Session';

const AccountPage = () => (
  <div>
    <h1>Account Page</h1>
    <PasswordForgetForm />
    <PasswordChangeForm />
  </div>
);

const condition = authUser => !!authUser;

export default withAuthorization(condition)(AccountPage);

我认为"withAuthorization"功能可能有问题，但是我已经在使用它来导出另一个页面.

I thought it could be something wrong in the "withAuthorization" function, but I'm already using it to export another page.

以下是"withAuthorization"文件以提供支持:

Here's the "withAuthorization" file for support:

import React from 'react';
import { withRouter } from 'react-router-dom';
import { compose } from 'recompose';
import AuthUserContext from './context';
import { withFirebase } from 'context';
import * as ROUTES from 'routes/portfolio';

const withAuthorization = condition => Component => {
  class WithAuthorization extends React.Component {
    componentDidMount() {
      this.listener = this.props.firebase.auth.onAuthStateChanged(
        authUser => {
          if (!condition(authUser)) {
            this.props.history.push(ROUTES.SIGN_IN);
          }
        },
      );
    }

    componentWillUnmount() {
      this.listener();
    }

    render() {
      return (
          <AuthUserContext.Consumer>
           {authUser =>
             condition(authUser) ? <Component {...this.props} /> : null
           }
         </AuthUserContext.Consumer>
      );
    }
  }

  return compose(
    withRouter,
    withFirebase,
  )(WithAuthorization);
};

export default withAuthorization;

推荐答案

withAuthorization 被导出为默认模块，您应该这样做:

withAuthorization is exported as default module, you should do:

import withAuthorization from '../Session'

代替:

import { withAuthorization } from '../Session'

这篇关于TypeError:导出页面时，Object(...)不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！