Блог

Я хочу запустить функцию при загрузке страницы, но загрузка не работает. Когда я пытаюсь componentDidMount, он говорит: «Не удается прочитать свойство «email» с нулевым значением». Когда я вызываю функцию нажатием кнопки, она работает. Что я могу сделать?

 import React from 'react'

import fire from './firebase'
import {Link, BrowserRouter as Router, Switch } from 'react-router-dom'

import './home.css'



class Home extends React.Component{
        state = {
            email: '',
            name: ''
        }


    logout(){
        fire.auth().signOut();
    }
    whenItStarts = () => {
        var email = fire.auth().currentUser.email
        var name = fire.auth().currentUser.displayName
        this.setState({email: email})
        this.setState({name: name})
    }
    getCurrentUser = () => {
        var email = fire.auth().currentUser.email
        var name = fire.auth().currentUser.displayName
        
        alert(email   ' '  name)
    }
    
    render(){
        return(
            <Router>
                <div onLoad = {this.whenItStarts}>
                <div className = "header">
                    <Switch>

                        <ul className = "menuList">
                            <Link to = "/profile"><li>My Profile</li></Link>
                            <li><button onClick = {this.logout}>Sign Out</button></li>
                            <li><button onClick = {this.currentUser}>Get Current User</button></li>
                             <h1>Hello there, {this.state.name}</h1>
                        </ul>
                    </Switch>
                        
                </div>
            </div>
            </Router>
        );
    }
}
export default Home  

вы не используете перехват componentDidMount жизненного цикла в своем коде.
componentDidMount вызывается сразу после монтирования компонента.
вам не нужно использовать onLoad , когда у вас есть этот хук.
вы можете узнать больше об этом здесь
Я переписал ваш код с помощью этого хука:

 import React from "react";

import fire from "./firebase";
import { Link, BrowserRouter as Router, Switch } from "react-router-dom";

import "./home.css";

class Home extends React.Component {
  state = {
    email: "",
    name: "",
  };

  logout() {
    fire.auth().signOut();
  }
  componentDidMount (){
    var email = fire.auth().currentUser.email;
    var name = fire.auth().currentUser.displayName;
    this.setState({ email: email });
    this.setState({ name: name });
  };
  getCurrentUser = () => {
    var email = fire.auth().currentUser.email;
    var name = fire.auth().currentUser.displayName;

    alert(email   " "   name);
  };

  render() {
    return (
      <Router>
        <div>
          <div className="header">
            <Switch>
              <ul className="menuList">
                <Link to="/profile">
                  <li>My Profile</li>
                </Link>
                <li>
                  <button onClick={this.logout}>Sign Out</button>
                </li>
                <li>
                  <button onClick={this.currentUser}>Get Current User</button>
                </li>
                <h1>Hello there, {this.state.name}</h1>
              </ul>
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}
export default Home;
  

пожалуйста, дайте мне знать, если у вас все еще есть какие-либо проблемы