React导航栏无法显示登录用户用户名的问题求助

你的代码存在几处语法错误，这是导致用户名无法正常显示的主要原因，以下是修正方案：

一、修复核心语法问题 #

• 箭头函数语法错误：then(response = {、catch(error = {、useEffect(() = { 需改为箭头函数的正确写法 =>
• useEffect依赖数组格式错误：结尾应为 }, []) 而非 []);
• JSX转义字符问题：将 <、&& 还原为原生JSX的 <、&&

二、修正后的完整代码 #

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import { Nav } from 'react-bootstrap'; // 假设使用react-bootstrap的Nav组件

const API_URL = '你的实际API地址';

function NavbarScroll() {
  const navigate = useNavigate();
  const [user, setUser] = useState(null);

  function handleLogout() {
    axios.post(`${API_URL}/logout`)
      .then(response => {
        localStorage.removeItem('user');
        setUser(null);
        navigate('/');
      })
      .catch(error => {
        console.error(error);
      });
  }

  useEffect(() => {
    const userData = JSON.parse(localStorage.getItem('user'));
    console.log('userData:', userData);
    if (userData !== null) {
      setUser(userData);
    }
    // setState是异步操作，此处直接打印user会显示旧值，可删除或通过监听user状态查看更新后的值
  }, []);

  return (
    <Nav.Link>
      {user && <span>Welcome, {user.username}</span>}
    </Nav.Link>
  );
}

export default NavbarScroll;

三、额外检查点 #

• 确认localStorage中存储的user对象确实包含username字段，可通过浏览器开发者工具的Application面板查看
• 若需监听user状态变化，可添加额外的useEffect：

  useEffect(() => {
    console.log('更新后的用户数据:', user);
  }, [user]);
  

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