React页面用户名加载后不显示，刷新才显示的问题解决需求

问题：
我基于token实现了获取用户详情的API，控制台能正常看到用户名，但页面首次加载时用户名不显示，刷新页面后才会出现。希望实现无需刷新就能直接在页面展示用户名，当前代码如下：

import React, { useEffect } from 'react'
import { useNavigate} from 'react-router-dom'

const Welcome = () => {
  

  const fetchuser=async ()=>{
    const response = await fetch("http://localhost:5000/api/auth/getuser", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              "auth-token":localStorage.getItem('token')
            },
      });
      const json=await response.json();
      localStorage.setItem('name',json.name)
      
      
    }
    

    let navigate=useNavigate();
    useEffect(()=>{
        if(!localStorage.getItem('token'))
        {
          navigate('/login')
           
        }
        fetchuser();
        
        // eslint-disable-next-line 
    },[navigate])

    const handleclick=()=>
    {
      localStorage.removeItem('token');
      localStorage.removeItem('name');
      navigate('/login')
    }
    
  return (
    <div>
      Welcome {localStorage.getItem('name')}
     <>
      <button className="btn btn-danger mx-4 " onClick={handleclick}>Signout</button>
      </>
    
    </div>
    
  )
}

export default Welcome

问题原因 #

1. 页面首次渲染时，fetchuser是异步执行的，此时localStorage.getItem('name')还未被赋值，所以页面显示空内容。
2. React 不会监听localStorage的变化，即使后续请求完成并把用户名存入localStorage，组件也不会自动重新渲染，必须刷新页面才能读取到新值。

解决方案 #

使用 React 的useState管理用户名状态，异步请求完成后更新状态触发组件重新渲染，实现无需刷新直接展示用户名：

修改后的代码：

import React, { useEffect, useState } from 'react'
import { useNavigate} from 'react-router-dom'

const Welcome = () => {
  // 用state管理用户名，初始化优先读取localStorage（兼容页面刷新场景）
  const [userName, setUserName] = useState(localStorage.getItem('name') || '')

  const fetchuser=async ()=>{
    const response = await fetch("http://localhost:5000/api/auth/getuser", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              "auth-token":localStorage.getItem('token')
            },
      });
      const json=await response.json();
      localStorage.setItem('name',json.name)
      // 更新state，触发组件重新渲染展示用户名
      setUserName(json.name)
    }
    

    let navigate=useNavigate();
    useEffect(()=>{
        if(!localStorage.getItem('token'))
        {
          navigate('/login')
           
        }
        fetchuser();
        
        // eslint-disable-next-line 
    },[navigate])

    const handleclick=()=>
    {
      localStorage.removeItem('token');
      localStorage.removeItem('name');
      setUserName('') // 同步清空状态，避免页面残留旧值
      navigate('/login')
    }
    
  return (
    <div>
      Welcome {userName}
     <>
      <button className="btn btn-danger mx-4 " onClick={handleclick}>Signout</button>
      </>
    
    </div>
    
  )
}

export default Welcome

关键改动说明 #

• 新增useState初始化用户名，兼顾首次加载和页面刷新的场景
• 请求完成后，不仅存入localStorage，还调用setUserName更新状态，触发组件自动重新渲染
• 渲染时直接使用状态值userName，而非直接读取localStorage
• 退出登录时同步清空状态值，避免页面残留旧数据

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