javascript - 我无法弄清楚为什么我会收到以下错误“错误:元素类型无效:”
问题描述
我对 React 还很陌生,对 Firebase 也很陌生。我正在关注 Robin Wieruch 关于将 React 与 Firebase 结合使用的教程。显然,有些事情我做错了,但它让我无法理解。我正在使用一种使用文件夹来命名我的组件的模式,每个组件文件夹中都有一个 index.js 文件来保存代码。
这是 App 组件的 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
希望这样做。
解决方案
好的!我想到了。问题是我试图在两个地方公开 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 }
感谢所有为我的思考过程做出贡献的人。
推荐阅读
- selenium - 如何使用 Java 中的 Selenium WebDriver 在 Windows PC 上附加文件
- kotlin - 如何在 kotlin 中使用嵌套列表将 Triple 列表映射到数据类中
- c# - 使用 Reflection 为网站创建可扩展图表
- mysql - 如果列为空,我如何从 Mysql 的另一个表中导入一些列?
- laravel - 获取每周网站访问次数并在 laravel 中的图表 js 中显示
- python - Django如何获取管理员全名
- spring-integration - spring integration - SFTP 确保上传成功
- html - CSS - 在水平滚动上定位项目的问题
- discord - 无法在命令文件夹的代码文件中使用 message.guild.me.displayColor
- karate - 可以使用相对路径而不是绝对路径从类路径外部空手道读取文件