Question

我是Reactjs的新手，目前正在关注有关使用react和firebase进行身份验证的本教程（https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/#react-firebase-protected-routes），但在这一点上遇到了一个奇怪的错误。

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);

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

这是整个代码的样子：

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”功能可能有问题，但是我已经在使用它来导出另一个页面。

以下是“ withAuthorization”文件以提供支持：

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;

Answer 1

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

import withAuthorization from '../Session'

代替：

import { withAuthorization } from '../Session'

TypeError：导出页面时Object（...）不是函数

1 个答案: