如何通过UseContext API在React个人页显示注册表单的名字

我正在React中开发登录/注册表单，目标是用户登录后在个人页面显示其用户名。目前个人页面能正常加载，但登录用户的名字无法显示；尝试用UseContext API实现该功能，不仅内容没显示，控制台还输出空值。以下是我的Register、Login、Profile及App.js代码，求解决。

Register组件代码 #

import React, { useContext } from 'react'
import { useState } from 'react';
import axios from 'axios';
import { RegisterContext } from '../Contexts/RegisterContext';
import './register.css'

function Register() {
    const [lnameReg,setLnameReg]=useState('');
    const [org,setOrg]=useState('');
    const [emailReg,setEmailReg]=useState('');
    const [passwordReg,setpasswordReg]=useState('');
    const {fnameReg,setFnameReg}=useContext(RegisterContext)
  
    const register=()=>{
        axios.post('http://localhost:4060/users/new_user',{
          firstname:fnameReg,
          lastname:lnameReg,
          organization:org,
          email:emailReg,
          password:passwordReg,
        }).then((response)=>{console.log(response)})
       }
 
    return (
        <div className='registration'>
        <h2>Register New User</h2>
        <label>First Name:</label>
        <input type="text"
          onChange={(e)=>{
            setFnameReg(e.target.value);
          }}
        />
        <label>Last Name:</label>
        <input type="text"
          onChange={(e)=>{
            setLnameReg(e.target.value);
          }}
        />
         <label>Organization:</label>
        <input type="text"
          onChange={(e)=>{
            setOrg(e.target.value);
          }}
        />
        <label>Email:</label>
        <input type="text"
          onChange={(e)=>{
            setEmailReg(e.target.value);
          }}
        />
        <label>Password:</label>
        <input type="text"
         onChange={(e)=>{
          setpasswordReg(e.target.value);
        }}
        />
        <button onClick={register}>Register</button>
      </div>
  )
}

export default Register

Login组件代码 #

import React, { useContext } from 'react'
import { useState } from 'react';
import { useNavigate } from "react-router";
import axios from 'axios';
import { fetchToken, setToken } from "./Auth";
import './login.css'
import { RegisterContext } from '../Contexts/RegisterContext';

function Login() {
    const navigate = useNavigate();
    const {usernamelog,setUsernamelog}=useContext(RegisterContext)
    const [passwordlog,setPasswordlog]=useState('');
    const [loginStatus,setLoginStatus]=useState('')
   
    var loginFormData = new FormData();
    loginFormData.append('username', usernamelog);
    loginFormData.append('password', passwordlog);
   
    const Login=()=>{
        axios(    
        {
          method: 'post',
          url: 'http://localhost:4060/login',
          data: loginFormData,
          headers: { "Content-Type": "multipart/form-data" },
        })
        .then((response)=>{
          console.log(response.data, "response.data.token");
          if (response.data) {
            setToken(response.data);
            navigate("/profile");
          }
        })
        .catch((response)=>{
          console.log(response);
        })
       }
  
    return (
    <div className='Login'>
          <h2>Login</h2>
          <input type= "text" placeholder="Email"
           onChange={(e)=>{
            setUsernamelog(e.target.value);
          }}
          />
          <input type= "password" placeholder="password"
           onChange={(e)=>{
            setPasswordlog(e.target.value);
          }}
          />
          <button onClick={Login}>Login</button>
          <h3>{loginStatus}</h3>
        </div>
  )
}

export default Login

Profile组件代码 #

import { useNavigate } from "react-router";
import Login from "./login";
import './profile.css'
import register from "./register";
import { RegisterContext } from "../Contexts/RegisterContext";
import { useContext } from "react";

export default function Profile() {
  const navigate = useNavigate();
  const {fnameReg}=useContext(RegisterContext)
 
  const signOut = () => {
    localStorage.removeItem(<Login> usernamelog</Login>);
    navigate("/login");
  };
  console.log(fnameReg);
  
  return (
    <>
      <div style={{ marginTop: 20, minHeight: 700 }}>
        <h1>Profile page</h1>
         <h2>{fnameReg}</h2> 
        <p>Hello there, welcome to your profile page</p>
        <button onClick={signOut}>sign out</button>
      </div>
    </>
  );
}

App.js代码 #

import './App.css';
import { useState } from 'react';
import * as yup from "yup";
import {userSchema} from './Validations/UserValid'
import { RequireToken } from "./components/Auth";
import {BrowserRouter as Router,Routes,Route} from 'react-router-dom';
import Home from './components/Home'; 
import Login from './components/login';
import Register from './components/register';
import Profile from './components/Profile';
import Survey from './components/Survey';
import { RegisterContext } from './Contexts/RegisterContext';
import React from 'react';

function App() {
  const [fnameReg,setFnameReg]=useState('');
  const [usernamelog,setUsernamelog]=useState('');
  
  const createUser= async (event) =>{
    event.preventDefault();
    let formData ={
    firstname: event.target[0]?.value,
    lastname: event.target[1]?.value,
    organization: event.target[2]?.value,
    email: event.target[3]?.value,
    password: event.target[4]?.value,
    };
    const isValid= await userSchema.isValid(formData);
    console.log(isValid);
  };
 
  return (
    <div className="App">
      <RegisterContext.Provider value={{fnameReg,setFnameReg,usernamelog,setUsernamelog}} >
        <h1>Our Future Reads</h1>
        <Router>
        <Routes>
          <Route path ="/" element={<Home />}/>
          <Route path ="/survey" element={<Survey />}/>
          <Route path ="/login" element={<Login/>}/>
          <Route path="/register" element={<Register />} />
          <Route
            path="/profile"
            element={
              <RequireToken>
                <Profile />
              </RequireToken>
            }
          />
        </Routes>
      </Router>
      </RegisterContext.Provider>    
    </div>
  );
}

export default App;

问题分析与修复方案 #

核心问题 #

1. Context状态未持久化：当前fnameReg是内存状态，页面刷新或跳转后会重置为空，且登录流程未从后端获取用户真实姓名更新Context。
2. 登录接口未返回用户信息：仅返回token，无法获取用户名用于展示。
3. Profile组件退出逻辑错误：localStorage.removeItem(<Login> usernamelog</Login>)是无效代码，JSX不能作为存储key。

具体修复步骤 #

1. 调整后端接口

让/login接口返回包含用户姓名的信息，响应格式示例：

{
  "token": "xxx",
  "user": {
    "firstname": "张三",
    "email": "xxx@xxx.com"
  }
}

2. 修复Login组件

登录成功后从后端响应中提取用户名并更新Context，同时持久化到localStorage：

const Login=()=>{
    const loginFormData = new FormData();
    loginFormData.append('username', usernamelog);
    loginFormData.append('password', passwordlog);
    
    axios({    
        method: 'post',
        url: 'http://localhost:4060/login',
        data: loginFormData,
        headers: { "Content-Type": "multipart/form-data" },
    })
    .then((response) => {
        if (response.data) {
            setToken(response.data.token);
            // 更新Context中的用户名
            setFnameReg(response.data.user.firstname);
            // 持久化用户信息到localStorage
            localStorage.setItem('userInfo', JSON.stringify(response.data.user));
            navigate("/profile");
        }
    })
    .catch((error) => {
        console.log(error);
        setLoginStatus('登录失败，请检查账号密码');
    })
}

3. 修复App.js初始化逻辑

从localStorage读取持久化的用户信息，初始化Context状态：

const [fnameReg, setFnameReg] = useState(() => {
    const savedUser = localStorage.getItem('userInfo');
    return savedUser ? JSON.parse(savedUser).firstname : '';
});

4. 修复Profile组件退出逻辑

const signOut = () => {
    localStorage.removeItem('token');
    localStorage.removeItem('userInfo');
    setFnameReg(''); // 清空Context状态
    navigate("/login");
};

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