我将用户数据保存到登录组件中的 localStorage，然后重定向到主页。首次访问时主页用户名未更新。我必须重新加载页面。然后数据在刷新后绑定(bind)到页面。请帮助我如何在第一次访问时显示数据？
下面是我的主页代码
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
export default class Header extends Component {
constructor(props) {
super(props);
this.state = {
isLogin: false,
isLogout: false,
user: ""
};
}
componentDidMount() {
const userData = localStorage.getItem("userData");
const user = JSON.parse(userData);
this.setState({ user: user });
if (userData) {
this.setState({ isLogin: true });
}
console.log(userData);
console.log(user);
}
logout = e => {
e.preventDefault();
localStorage.clear();
this.setState({ isLogout: true });
};
render() {
if (this.state.isLogin === false || this.state.isLogout === true) {
return (
<header
id="kr-header"
className="kr-header cd-auto-hide-header kr-haslayout"
>
<div className="container">
<div className="row">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<strong className="kr-logo">
<Link to="/">
<img src="images/logo.png" alt="company logo here" />
</Link>
</strong>
<nav className="kr-addnav">
<ul>
<li>
<Link
id="kr-btnsignin"
className="kr-btn kr-btnblue"
to="login_register"
>
<i className="icon-smiling-face" />
<span>Join Now</span>
</Link>
</li>
<li>
<a
className="kr-btn kr-btngreen"
href="dashboardaddlisting.html"
>
<i className="icon-plus" />
<span>Add Listing</span>
</a>
</li>
</ul>
</nav>
<nav id="kr-nav" className="kr-nav">
<div className="navbar-header">
<button
type="button"
className="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#kr-navigation"
aria-expanded="false"
>
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar" />
<span className="icon-bar" />
<span className="icon-bar" />
</button>
</div>
<div
id="kr-navigation"
className="collapse navbar-collapse kr-navigation"
>
<ul>
<li>
<a href="dashboard.html">Dasboard</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
);
} else {
return (
<header
id="kr-header"
className="kr-header cd-auto-hide-header kr-haslayout"
>
<div className="container">
<div className="row">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<strong className="kr-logo">
<Link to="/">
<img src="images/logo.png" alt="company logo here" />
</Link>
</strong>
<nav className="kr-addnav">
<ul>
<li>
<Link
id="kr-btnsignin"
className="kr-btn kr-btnblue"
to="login_register"
>
<i className="icon-smiling-face" />
<span>{this.state.user.user.firstname}</span>
</Link>
</li>
<li>
<a
className="kr-btn kr-btngreen"
href="dashboardaddlisting.html"
>
<i className="icon-plus" />
<span>Add Listing</span>
</a>
</li>
<li>
<a onClick={this.logout} className="kr-btn kr-btngreen">
<i className="icon-plus" />
<span>Logout</span>
</a>
</li>
</ul>
</nav>
<nav id="kr-nav" className="kr-nav">
<div className="navbar-header">
<button
type="button"
className="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#kr-navigation"
aria-expanded="false"
>
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar" />
<span className="icon-bar" />
<span className="icon-bar" />
</button>
</div>
<div
id="kr-navigation"
className="collapse navbar-collapse kr-navigation"
>
<ul>
<li>
<a href="dashboard.html">Dasboard</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
);
}
}
}
登录-注册组件代码如下
import React, {Component} from 'react';
import { Link,Redirect ,withRouter } from 'react-router-dom';
import PropTypes from "prop-types";
import Otp from './otp';
import axios from '../api';
export default class LoginRegister extends Component {
static contextTypes = {
router: PropTypes.object
}
constructor(props,context){
super(props,context);
this.state = {
fname:'',
lname:'',
emailaddress:'',
password:'',
mobile:'',
user:'',
login_pass:'',
isLogin:false
}
this.regi_data = this.regi_data.bind(this);
this.login_data = this.login_data.bind(this);
// this.otpModalRef = React.createRef();
}
regi_data(e){
this.setState({[e.target.name] : e.target.value}
);
}
login_data(e){
this.setState({[e.target.name] : e.target.value})
}
// otpModalRef = ({onOpenModal}) => {
// this.showModal = onOpenModal;
// }
componentDidMount(){
if (localStorage.getItem('userData')) {
this.context.router.history.push({
pathname:'/',
});
}
}
login = (e) => {
e.preventDefault();
axios.post('/api/signin', {
user:this.state.user,
password:this.state.login_pass,
})
.then(res => {
//console.log(res);
localStorage.setItem('userData', JSON.stringify(res.data));
this.context.router.history.push({
pathname:'/',
});
// window.location.reload();
this.setState({isLogin: true});
})
.catch(function (error) {
console.log(error.message);
})
}
register = (e) => {
e.preventDefault();
axios.post('/api/user/add', {
firstname: this.state.fname,
lastname:this.state.lname,
email:this.state.emailaddress,
password:this.state.password,
mobile:this.state.mobile
},
)
.then(res => {
console.log(res);
// this.showModal();
this.context.router.history.push({
pathname:'/otp_validate',
});
}).catch(function(error){
alert(error.message)
})
}
最佳答案
问题
从上面显示的代码和您面临的问题来看，您似乎有一个从 Login 的父组件呈现的通用组件 Header 和HomePage，可能来自中央 App 组件，您必须在其中声明 Login 和 Homepage 的路由。如果是这种情况，您面临的问题是，当 App 第一次加载时，Header 也会在此时加载，并且它的 componentDidMount 方法被调用。但是由于此时您没有登录，header 组件没有获取显示用户名所需的用户数据。稍后，每当您执行实际登录操作、将数据存储在本地存储中并重定向到主页时， header 不会被卸载和重新装载，因为它超出了这些单独的 Login 和 Homepage 的范围 组件，因此它的 componentDidMount 事件将不会被触发，并且不会在 header 组件中检测到任何更改。
修复
方法 1:要么创建两个不同的 Header 组件，一个用于登录状态，一个用于注销状态，并将它们放在 Login 和 的渲染方法中>HomePage 组件。在这种情况下，上述在Header组件的componentDidMount中编写的localstorage逻辑应该可以正常工作。
方法 2:将用户数据提升到 Header 组件的父级，并将用户数据作为 prop 传递给该组件。在这种情况下，您可以直接在 Header 的 呈现方法中使用该属性。
关于javascript - 在reactjs中登录主页后数据不刷新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55256212/