reactjs - 反应:未捕获的类型错误:无法读取未定义的属性“应用程序”
问题描述
我在 SO 上看到过其他类似问题的帖子,但我尝试关注关于调试每个问题的讨论,在这些错误出现的框架中,但我不知道如何在反应中解决问题。
当我尝试加载本地版本时收到此错误消息。
npm.js:341 Uncaught TypeError: Cannot read property 'app' of undefined
at new hm (npm.js:341)
at Object.<anonymous> (RegisterPage.js:14)
at __webpack_require__ (bootstrap e6e64bf0867d646d6dec:19)
at Object.<anonymous> (AppRouter.js:12)
at __webpack_require__ (bootstrap e6e64bf0867d646d6dec:19)
at Object.<anonymous> (app.js:4)
at __webpack_require__ (bootstrap e6e64bf0867d646d6dec:19)
at Object.<anonymous> (bundle.js:50995)
at __webpack_require__ (bootstrap e6e64bf0867d646d6dec:19)
at module.exports (bootstrap e6e64bf0867d646d6dec:62)
registerPage 是由某人编写的,他无法使其正常工作。在我把它扔掉之前,我想看看我是否可以调试这个问题。当我评论此页面时,页面会加载。所以问题与此页面上的内容有关。
registerPage 有:
import React from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { firebase, auth } from '../../firebase/firebase'
import * as firebaseui from 'firebaseui';
import authHelper from '../../services/authHelper'
// This component displays the FirebaseUI widget.
// On succcessful singup / singin it sets the user auth state
// and redirects to appropriate page.
const authUi = new firebaseui.auth.AuthUI(auth);
const pageStyle = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
};
class RegisterPage extends React.Component {
componentDidMount() {
const self = this;
const uiConfig = {
callbacks: {
signInSuccessWithAuthResult: function (authResult, redirectUrl) {
// Do something with the returned AuthResult.
const authUser = authResult.user;
const credential = authResult.credential;
const isNewUser = authResult.additionalUserInfo.isNewUser;
const operationType = authResult.operationType;
if (isNewUser) {
// this is a new sign up.
// create user and display pending message
authHelper.createNewUser(authUser)
.then(() => self.props.history.push('/Pending'))
}
else if (operationType === 'signIn') {
authHelper.getUser(authUser.uid)
.then(snapshot => {
const user = snapshot.val()
if (user) {
if (!user.pending) {
//mark the user as approved and redirect to dashboard
const { onSetAuthUser } = self.props
authUser.approved = true;
onSetAuthUser(authUser);
self.props.history.push('/Dashboard')
} else {
//not approved, show pending message
self.props.history.push('/Pending')
}
} else {
console.error(`could not find user in db for user uid: ${authUser.uid}`)
}
})
}
// Return type determines whether we continue the redirect automatically
// or whether we leave that to developer to handle.
return false;
},
},
'credentialHelper': firebaseui.auth.CredentialHelper.NONE, // turn off account chooser
signInOptions: [
// Leave the lines as is for the providers you want to offer your users.
firebase.auth.EmailAuthProvider.PROVIDER_ID,
],
};
authUi.start('#firebaseui-auth', uiConfig);
}
componentWillUnmount() {
if (authUi) {
authUi.reset();
}
}
render() {
// just renders the firebase ui widget
return (<div style={pageStyle}><div id="firebaseui-auth"></div></div>)
}
};
// set up passing of store actions as component props
const mapDispatchToProps = dispatch => ({
onSetAuthUser: authUser => dispatch({ type: 'AUTH_USER_SET', authUser }),
});
// connect this component to the store
export default withRouter(connect(undefined, mapDispatchToProps)(RegisterPage));
谁能看到这种类型错误的原因可能是什么,或者如何弄清楚它的含义?
解决方案
这不是解决方案,而是跟踪此问题的个人方式。
在 webpack.dev 中配置 sourcemap 以找到术语“new hm (npm.js:341)”
在注册页面禁用/注释掉redux部分,看看错误是否仍然存在,如果没有错误,则动作/减速器有问题,如果是,转到步骤2
- 使用 console.log 检查传递给注册页面的父级的道具/状态
只是我的2美分。祝你好运!
推荐阅读
- android - 如何从 android 应用程序生成类似事件的 Ctrl+v(Paste)?
- version-control - EM 破折号(“-”)在 WinCvs 中更新时被字符替换
- dialogflow-es - 如何使用 Dialogflow 电话网关并在 nodejs 等后端平台中处理它
- javascript - nodejs 中的 Promise 和 async/await
- c++ - volatile sig_atomic_t 的内存安全
- qt - 如何使用Win7设置QTcpServer单独监听端口
- ruby-on-rails - gem 'rails-settings-cached' 是否允许多个设置模型?
- python - Kivy 应用程序未从 systemd 服务运行
- javascript - 函数在之前执行,结果不适用
- cpanel - 页面不工作错误 - Laravel cPanel