Question

正如标题所说，我的导航栏在更新状态后不会更改片段。我不知道如何刷新它，其他想法似乎对我不起作用。我试图改变陈述。我想要做的就是，在用户成功登录后，状态更改为 true，并且导航栏会使用相应的组件进行更新。谢谢！

Home.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

Navbar.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;

Answer 1

您想使用 localStorage 作为不支持 React 重新渲染/更新组件的 useEffect 依赖项。检查这个：useEffect do not listen for localStorage - 这就像你的问题的重复。

状态更改后导航栏不更新

1 个答案: