Firebase provider数据在道具中传递，无法在componentDidMount中访问

Question

使用Firebase并能够将providerData传递给道具。

尽管传递到另一个组件时，我无法从componentDidMount中的数组中获取。

我一直坚持尝试通过以下方式显示用户的电子邮件地址：console.log(this.state.providerData[0].email )

获取TypeError: Cannot read property '0' of undefined。

这是针对create-react-app的；尝试获取用户的ID以运行其他ajax命令。

App.js

// React core.
import React, { Component } from 'react';

// Firebase.
import firebase from 'firebase/app';
import 'firebase/auth';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

// Styles
import styles from './index.css'; // This uses CSS modules.
import './firebaseui-styling.global.css'; // Import globally.

//Components
import Dashboard from './components/Dashboard';

// Instantiate a Firebase app.
const firebaseApp = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN
});

class App extends Component {

  state = {
    isSignedIn: undefined,

  };


  uiConfig = {
    signInFlow: 'popup',
    signInOptions: [
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    ],
    callbacks: {
      signInSuccessWithAuthResult: () => false,
    },
  };

  componentDidMount() {
    this.unregisterAuthObserver = firebaseApp.auth().onAuthStateChanged((user) => {
      this.setState({ isSignedIn: !!user });
      //User is signed in.
      console.info('User is signed in.');
      this.setState({providerData: user.providerData})   
    });
  }

  componentWillUnmount() {
    this.unregisterAuthObserver();
  }

  render() {
    return (  
      <div className={styles.container}>
        {this.state.isSignedIn !== undefined && !this.state.isSignedIn &&
          //Not signed-in yet
          <div>
            <Login />
            <StyledFirebaseAuth className={styles.firebaseUi} uiConfig={this.uiConfig}
              firebaseAuth={firebaseApp.auth()} />
          </div>
        }

        {this.state.isSignedIn &&
          //Signed in
          <div className={styles.signedIn} id="content-wrap">
            <Dashboard providerData={this.state.providerData} />
            <button><a className={styles.button} onClick={() => firebaseApp.auth().signOut()}>Sign-out</a></button>   
          </div>
        }   
      </div>
    );
  }
}

export default App;

Dashboard.js

import React, { Component } from 'react';


class Dashboard extends Component {

    state = {
        newEntry: false,
        newEntryButton: true,
        habitData: [],
        hamburgerOpen: false,
        checkIn: false,
        habitExist: false,
        user: '',
    };


    componentDidMount = () => {

          console.log(this.state.providerData[0].email )

        }




    render() {
        return (
            <div id="content-wrap">

                <h1>test</h1>
            </div>
        );
    }
}

export default Dashboard;

我想将pgamble@gmail.com放在控制台中。

如果我删除填充道具的控制台行：

Answer 1

在仪表板中，是否不应该通过this.props而不是this.state来访问它？