如何在React导航栏的h1标签中渲染数据库获取的用户名

排查方向 #

1. 检查LocalStorage中的用户数据结构
   打开浏览器开发者工具（F12），切换到「Application」标签，找到「Local Storage」查看currentUser的值，确认返回的对象里是否包含name字段——很多时候问题出在这里，比如后端返回的字段是username而不是name，或者登录时没有把name存入LocalStorage。

2. 处理React中的类名属性
   React里DOM元素的类名要用className代替class，虽然这不会直接导致用户名不显示，但这是React的规范写法，避免潜在的兼容性问题。

3. 处理用户名不存在的边界情况
   即使user存在，user.name也可能为undefined，需要用可选链?.或默认值来兜底，避免页面显示空白或undefined。

修改后的代码示例 #

import React from "react";

function Navbar() {
    const user = JSON.parse(localStorage.getItem("currentUser"));
    return (
        <div>
            <nav className="navbar navbar-expand-lg">
                <a className="navbar-brand" href="#">
                Book Rooms
                </a>
                <button
                className="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Toggle navigation"
                >
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarNav">
                    <ul className="navbar-nav">
                        {user ? (
                        <>
                            <h1 style={{color: 'white'}}>{user?.name || '用户'}</h1> 
                        </>
                        ) : (
                        <>
                            <li className="nav-item active">
                            <a className="nav-link" href="/register">
                                Register
                            </a>
                            </li>
                            <li className="nav-item">
                            <a className="nav-link" href="/login">
                                Login
                            </a>
                            </li>
                        </>
                        )}
                    </ul>
                </div>
            </nav>
        </div>
    );
}

export default Navbar;

额外优化：监听LocalStorage变化 #

如果登录后跳转页面时，导航栏没有及时更新用户名，可以通过useState和useEffect监听LocalStorage的变化，确保组件状态同步：

import React, { useState, useEffect } from "react";

function Navbar() {
    const [user, setUser] = useState(JSON.parse(localStorage.getItem("currentUser")));

    useEffect(() => {
        const updateUser = () => {
            setUser(JSON.parse(localStorage.getItem("currentUser")));
        };
        // 监听LocalStorage变化
        window.addEventListener('storage', updateUser);
        // 组件卸载时移除监听
        return () => window.removeEventListener('storage', updateUser);
    }, []);

    return (
        // 同上的JSX结构
    );
}

确认登录逻辑 #

最后要确保登录成功后，完整的用户数据（包含name字段）被存入LocalStorage：

// 登录接口调用示例
axios.post('/api/login', { username, password })
  .then(res => {
    const userData = res.data;
    // 确认userData包含name字段
    localStorage.setItem("currentUser", JSON.stringify(userData));
    // 跳转页面
    window.location.href = '/';
  })

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