javascript - 状态更改后导航栏不更新
问题描述
正如标题所说,我的导航栏在更新状态后没有改变片段。我不知道如何刷新它,其他想法似乎对我不起作用。我试图改变陈述。我想要做的就是,在用户成功登录后,状态更改为 true 并且导航栏使用相关组件进行更新。谢谢 !
主页.js
import React, { useEffect } from 'react'
function Home() {
useEffect(()=>{
if(!localStorage.getItem("loggedIn")){
localStorage.setItem("loggedIn",false);
}
},[]);
return (
<div>
Home
</div>
)
}
export default Home
登录.js
import React from 'react';
import './Login.css';
import Axios from 'axios';
import { useEffect, useState } from "react";
import {useHistory} from 'react-router-dom';
function Login() {
const[username,setUsername] = useState('');
const[password,setPassword] = useState('');
const[errorMessage,setErrorMessage] = useState('');
let history = useHistory();
const login = () =>{
console.log(username);
Axios.post("http://localhost:3001/user/login",{username: username,password: password}).then((response) => {
//console.log(response);
if(response.data.loggedIn){
localStorage.setItem("loggedIn",true);
localStorage.setItem("username",response.data.username);
history.push('/');
}else{
setErrorMessage(response.data.message);
}
});
};
return (
<div className="Login">
<h1>Login to your BugTrack account !</h1>
<div className="LoginForm">
<input type="text" placeholder="USERNAME"
onChange={(event)=>{setUsername(event.target.value)}}/>
<input type="password" placeholder="PASSWORD"
onChange={(event)=>{setPassword(event.target.value)}}/>
<button onClick={login}>Login to you account</button>
<h1 style={{color: "red"}}>{errorMessage}</h1>
</div>
</div>
);
}
export default Login
导航栏.js
import React, { useEffect, useState, Component, Fragment } from 'react';
import './Navbar.css';
function Navbar() {
const [loggedIn, setLoggedIn] = useState(false);
useEffect(()=> {
setLoggedIn(localStorage.getItem("loggedIn"));
},[localStorage.getItem("loggedIn")]);
return (
<div className="Navbar">
<a href="/">Home</a>
{!loggedIn ? (
<Fragment>
<a href="profile">Profile</a>
</Fragment>
):(
<Fragment>
<a href="/register">Register</a>
<a href="/login">Login</a>
</Fragment>
)}
</div>
);
}
export default Navbar;
解决方案
您想localStorage
用作不支持 React 重新渲染/更新组件的 useEffect 依赖项。检查这个:useEffect 不要听 localStorage - 这就像你的问题的重复。
推荐阅读
- php - PHP时间戳到日期返回奇怪的日期
- python - K-means聚类,如何垂直划分数据?
- mysql - 服务器无法在 Google App Engine 中启动;在本地主机中确定
- python - 在 Python 中使用字符串而不是字节迭代 gzipped 对象
- ruby-on-rails - Rails 引擎中的 SCSS @import 语句导致错误:`Aborted (core dumped)`
- spring - 如何验证具有绑定结果的表单?
- sql-server - 为我们的 M1 erp 软件创建标签的问题
- authentication - 如何从 Chrome 中删除所有 SO 痕迹
- javascript - d3面积堆积折线图
- python - Django 对象过滤器