如何解决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;
请告诉我您是否仍然有任何问题
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。