我无法弄清楚为什么我会收到以下错误“错误：元素类型无效：”

Question

我对 React 还很陌生，对 Firebase 也很陌生。我正在关注 Robin Wieruch 关于将 React 与 Firebase 结合使用的教程。显然，有些事情我做错了，但它让我无法理解。我正在使用一种使用文件夹来命名我的组件的模式，每个组件文件夹中都有一个 index.js 文件来保存代码。

这是应用组件的 index.js：

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

import * as ROUTES from '../../constants/routes'

import Navigation from '../Navigation'
import LandingPage from '../Landing'
import SignUpPage from '../SignUp'
import SignInPage from '../SignIn'
import PasswordForgetPage from '../PasswordForget'
import HomePage from '../Home'
import AccountPage from '../Account'
import AdminPage from '../Admin'

const App = () => (
  <Router>
    <Navigation />

    <hr />

    <Route exact path={ROUTES.LANDING} component={LandingPage} />
    <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
    <Route path={ROUTES.SIGN_IN} component={SignInPage} />
    <Route path={ROUTES.PASSWORD_FORGET} component={PasswordForgetPage} />
    <Route path={ROUTES.HOME} component={HomePage} />
    <Route path={ROUTES.ACCOUNT} component={AccountPage} />
    <Route path={ROUTES.ADMIN} component={AdminPage} />
  </Router>
)

export default App

这里是注册组件的 index.js 文件

import React, { Component } from 'react'
import { Link, withRouter } from 'react-router-dom'
import { compose } from 'recompose'

import FirebaseContext, { withFirebase } from '../Firebase'
import * as ROUTES from '../../constants/routes'

const SignUpPage = () => (
  <div>
    <h1>SignUp</h1>
    <FirebaseContext.Consumer>
      { firebase => <SignUpForm firebase={firebase} />}
    </FirebaseContext.Consumer>
  </div>
)

...

export default SignUpPage

export { SignUpForm, SignUpLink }

我不确定是否有任何其他文件会有所帮助。

我很抱歉。好像我忘记了最重要的文件。这是 src 文件夹中的 index.js：

import React from 'react'
import ReactDOM from 'react-dom'

import './index.css'
import * as serviceWorker from './serviceWorker'

import App from './components/App'
import Firebase, { FirebaseContext } from './components/Firebase'

ReactDOM.render(
    // make Firebase Context available to the app
    <FirebaseContext.Provider value={ new Firebase() }>
      <App />
    </FirebaseContext.Provider>, 
    document.getElementById('root'),
  )

错误出现在这个文件 ReactDOM.render 的第 12 行。

根据@Victor 的要求，以下是 Firebase 组件：

Firebase 文件夹中的 index.js

import FirebaseContext, { withFirebase } from './context'
import Firebase from './firebase'

export default Firebase

export { FirebaseContext, withFirebase }

Firebase 文件夹中的 context.js

import React from 'react'

const FirebaseContext = React.createContext(null)

// create the HOC withFirebase
export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    { firebase => <Component { ...props } firebase={ firebase } />}
  </FirebaseContext.Consumer>
)

export default FirebaseContext

Firebase 文件夹中的 firebase.js

import app from 'firebase/app'
import 'firebase/auth'
// import 'firebase/database'

// the constant value when the environment = 'production'
const prodConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_SENDER_ID,
}

// the constant value when the environment !== 'production'
const devConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_SENDER_ID,
}

// set the config constant to the appropriate value
const config = process.env.NODE_ENV === 'production' ? prodConfig : devConfig

class Firebase {
  constructor() {
    // initialize the app with the Firebase config
    app.initializeApp(config)

    this.auth = app.auth()
  }

  // ***** Auth API ***** (use the offical Firebase endpoint)
  doCreateUserWithEmailAndPassword = ( email, password ) => this.auth.createUserWithEmailAndPassword( email, password )

  // ***** SignIn ***** (use the offical Firebase endpoint)
  doSignInWithEmailAndPassword = ( email, password ) => this.auth.SignInWithEmailAndPassword( email, password )

  // ***** SignIn ***** (use the offical Firebase endpoint)
  doSignInWithEmailAndPassword = ( email, password ) => this.auth.SignInWithEmailAndPassword( email, password )

  // ***** SignOut ***** (use the offical Firebase endpoint)
  doSignOut = ( email, password ) => this.auth.SignOut()

  // ***** Password Reset ***** (use the offical Firebase endpoint)
  doPasswordReset = email => this.auth.sendPasswordResetEmail( email )

  // ***** Password Update ***** (use the offical Firebase endpoint)
  doPasswordUpdate = password => this.auth.currentUser.updatePassword( password )
}

export default Firebase

希望如此。

Answer 1

好的！我想到了。问题是我试图在两个地方公开 FirebaseContext.Consumer，在 Firebase 文件夹中的 context.js 文件中（这是该应用程序的所属位置）。但是我也将暴露 FirebaseContext.Consumer 的代码留在了 SignUp 文件夹中 index.js 文件的 SignUpPage 块中（这是我最初放置它的位置——在我构建 HOC（context.js）之前）。看了它（但没有真正看到它）一天半，我突然意识到我正在尝试双重职责。解决方案是重构 SignUpPage 如下（与我上面的原始帖子相比）：

用于注册组件的 index.js：

import React, { Component } from 'react'
import { Link, withRouter } from 'react-router-dom'
import { compose } from 'recompose'

import { withFirebase } from '../Firebase'
import * as ROUTES from '../../constants/routes'

const SignUpPage = () => (
  <div>
    <h1>SignUp Page</h1>
    <SignUpForm />
  </div>
)

...

const SignUpForm = compose(withRouter, withFirebase,)(SignUpFormBase)

export default SignUpPage

export { SignUpForm, SignUpLink }

感谢所有对我的思考过程做出贡献的人。