React项目JWT登录后跳转个人页渲染用户name显示undefined问题排查

问题原因 #

你遇到的是典型的异步时序 + 前端框架状态更新不触发的问题，核心问题有三个：

1. authenticationService.findUser是异步请求，.then回调的执行时机晚于组件的首次渲染，你初始声明的let name没有赋值，首次渲染时读取的就是undefined
2. 你用普通变量存name，就算后续异步回调里给这个变量赋值，也不会触发页面重新渲染，框架感知不到普通变量的变更，所以页面内容不会更新
3. 额外的问题：你代码里的console.log(data)引用了未定义的data变量，会额外抛出运行时错误

修复方案（以React函数组件为例，你的代码明显是JSX语法） #

用框架提供的状态API存数据，同时用副作用钩子包裹异步请求逻辑，避免重复触发请求：

import { useState, useEffect } from 'react';
import jwt_decode from 'jwt-decode';

// 组件内部逻辑
// 用useState创建响应式状态，初始值可以设为加载提示
const [name, setName] = useState('加载中...');
const token = localStorage.getItem('User');

useEffect(() => {
  // 提前判空避免token不存在时的报错
  if (!token) return;
  authenticationService.findUser(jwt_decode(token)["sub"])
    .then(response => response.json())
    .then(response => {
      // 调用状态更新方法触发组件重新渲染
      setName(response.name);
      console.log(response.name);
    })
    // 建议加异常捕获处理请求失败的场景
    .catch(err => {
      console.error('拉取用户信息失败:', err);
      setName('获取用户信息失败');
    })
// 依赖项数组，只有token变化时才重新执行请求逻辑
}, [token]);

return (
  <div>
    <h1>{name}</h1>
  </div>
);

额外注意事项 #

• 可以先在接口回调里打印完整的response对象，确认接口返回的结构里确实存在name字段，避免拼写错误/字段层级错误
• 如果是Vue框架，就把useState换成ref/reactive，useEffect换成onMounted钩子，核心逻辑是一致的：用响应式状态存数据，异步请求完成后更新响应式状态触发渲染

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