onload在我的反应页面上不起作用

问题描述

我想在页面加载时运行一个函数，但是onLoad无法正常工作。当我尝试componentDidMount时，它说“无法读取null的属性'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。
您可以详细了解here
我用这个钩子重写了您的代码：

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;

请告诉我您是否仍然有任何问题