首页 > 解决方案 > 反应:未捕获的类型错误:无法读取未定义的属性“应用程序”

问题描述

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

谁能看到这种类型错误的原因可能是什么,或者如何弄清楚它的含义?

标签: reactjs

解决方案


这不是解决方案,而是跟踪此问题的个人方式。

  1. 在 webpack.dev 中配置 sourcemap 以找到术语“new hm (npm.js:341)”

  2. 在注册页面禁用/注释掉redux部分,看看错误是否仍然存在,如果没有错误,则动作/减速器有问题,如果是,转到步骤2

  3. 使用 console.log 检查传递给注册页面的父级的道具/状态

只是我的2美分。祝你好运!


推荐阅读