onload在我的react页面上不起作用

Question

我想在页面加载时运行一个函数，但onLoad不起作用。当我尝试componentDidMount时，它说"无法读取null的属性"电子邮件"。"。当我按下按钮调用函数时，它就起作用了。我能做什么？

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

Answer 1

您的代码中没有使用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;

如果还有问题，请告诉我