ReactJs|登录需要刷新

Question

我的登录页面不工作，需要刷新才能登录。输入数据显示在控制台中，带有201，但我必须手动刷新页面才能继续。

这是我的登录js:

export default class Login extends Component {
state = {};
submitHandler = e => {
e.preventDefault()
const logingdata ={
email : this .Email,
password: this .Password
}

axios
.post('/api/UserLogin', logingdata)
.then(response => {
console.log(response); //to print response in console in developper tool

localStorage.setItem('login', response.data.token);
console.log(this.Email);{
const loginmail=logingdata.email
console.log(loginmail);
}

})
.catch(error => {
console.log(error => console.log(error.response.data))
})
}

render() {
return (
<div className="outer">
<div className="inner"> 
<form onSubmit={ this.submitHandler}>
<h3>Log in</h3>

//Login form comes here.
<button type="submit" className="btn btn-dark btn-lg btn-block" >Sign in</button>

<p className="forgot-password text-right">
Forgot <Link to= "/Forgotpassword" >password?</Link>
</p>
</form>
</div>
</div>
);
}
}

我搞不清楚问题出在哪里。有人能帮我吗？

Answer 1

您所呈现的代码将令牌保存在localStorage中，当您在存储中有这些信息时，可能其他组件正在处理重定向。您需要在localStorage.setItem('login', response.data.token);之后重定向到特定的URL(可能是主页(，仅此而已

Answer 2

您正在设置后api响应后记录的用户数据。但react看不到本地存储的更改。

您需要使组件对本地存储更改做出反应。

使用类似react的东西使用本地存储

然后，您可以查看用户数据是否发生了更改，并呈现记录的组件，或者将用户发送到新的路由。