React全局状态未在About子组件更新问题求助

我实现了一个简单的React登录组件，点击按钮时全局状态值会改变，仅Login组件能正常更新：点击按钮后会显示“You are login”或“You are not”，按钮文本会在“Login”和“logout”间切换，但About组件无法同步更新该状态。

Login组件 #

import { useContext, useEffect, useState } from "react"
import { AppContext } from "../src/App"

export const Login = () => { 
    
    const value = useContext(AppContext);
    

    const doLogin = (e) => {
        e.preventDefault();
        if (value.loginStatus) {
            value.setLoginStatus(false)
        } else {
            value.setLoginStatus(true)
        }
    }
    

    return(
        <>
        <h1>{value.loginStatus?"You  are login": "You are not"}</h1>
        <button onClick={(e) => doLogin(e)}>{value.loginStatus?"Login": "logout"}</button>
        </>
        
    )
}

About组件 #

About组件无法更新状态。

import { useContext } from "react";
import { AppContext } from "../src/App";

export const About = () => {
    const value = useContext(AppContext);
    
    return(
        <h1>{value.loginStatus? "You are logged in": "You are not"}</h1>
    )
};

App组件 #

import './App.css'
import { useState, createContext } from 'react'
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import { Home } from '../Pages/Home';
import { About } from '../Pages/About';
import { Login } from '../Pages/Login';

export const AppContext = createContext();
function App() {
  const [loginStatus, setLoginStatus] = useState();
  return (
    <>
        <AppContext.Provider value={{loginStatus, setLoginStatus}}>
          <Router>
            <Routes>
              <Route path='/' element={ <Home />}></Route>
              <Route path='/about' element={ <About />}></Route>
              <Route path='/login' element={ <Login />}></Route>
            </Routes>
          </Router>
        </AppContext.Provider>
    </>
  )
}

export default App

请问我哪里出错了？

问题原因及解决方案 #

1. Context导入路径错误 #

这是About组件无法同步状态的核心原因：Login和About组件中导入AppContext的路径../src/App是错误的。假设项目结构为src/App.js，页面组件放在src/Pages/目录下，那么从Pages文件夹到App.js的正确路径应为../App（../已指向src目录，再加src会导致路径重复，无法获取正确的Context实例）。

修正Login组件的导入：

import { AppContext } from "../App"

修正About组件的导入：

import { AppContext } from "../App"

2. useState未设置初始值 #

const [loginStatus, setLoginStatus] = useState();未设置初始值，默认状态为undefined，虽布尔判断中undefined会被视为false，但初始状态不明确易引发逻辑异常。建议明确初始状态为未登录：

// 在App组件中修改
const [loginStatus, setLoginStatus] = useState(false);

3. Login组件按钮文本逻辑颠倒 #

当前按钮文本逻辑为loginStatus为true时显示“Login”，不符合用户预期，应改为已登录时显示“Logout”：

// 修正Login组件的按钮文本
<button onClick={(e) => doLogin(e)}>{value.loginStatus ? "Logout" : "Login"}</button>

完成以上修改后，About组件即可正常同步全局状态的变化。

内容的提问来源于stack exchange，提问作者Jerome