React中引用response.data状态值异常：渲染无内容问题排查

你的代码存在几个关键问题，导致无法正常渲染user.username：

1. 组件命名违反React规范 #

React组件必须以大写字母开头，你将组件命名为小写的getUser，会被React识别为普通函数而非组件，无法触发正常的组件渲染逻辑。

2. 函数名冲突 #

组件本身的函数名是getUser，内部又定义了一个同名的getUser数据请求函数，这会引发作用域冲突，导致useEffect中调用的函数并非预期的请求逻辑，或出现变量提升的异常。

3. State初始值类型不匹配 #

你给user设置的初始值是空字符串""，但后续赋值的是对象类型的response.data。初始渲染时user是字符串，访问user.username会得到undefined，即使后续状态更新为对象，也可能因前期的隐性错误导致渲染异常。

修改后的代码 #

import React, { useState, useEffect } from "react";
import UserService from "../services/user.service";
import AuthService from "../services/auth.service";

// 组件名改为大写开头的规范命名
export const UserProfile = () => {
    const currentUser = AuthService.getCurrentUser();
    // 初始值设为空对象，与后续赋值的类型保持一致
    const [user, setUser] = useState({});

    useEffect(() => {
        fetchUser();
    }, []);

    // 内部函数改名，避免与组件名冲突
    const fetchUser = () => {
        UserService.getUser(currentUser.id)
            .then(response => {
                setUser(response.data);
                console.log(response.data);
            })
            .catch(e => {
                console.log(e);
            });
    };

    return (
        <div>
          {/* 添加空值判断，避免异步请求未完成时的undefined */}
          {user.username || '加载中...'}
        </div>
    );
};

额外建议 #

• 始终给State设置与预期数据类型一致的初始值，避免类型切换带来的隐性问题；
• 渲染对象属性时，建议添加空值判断（如user?.username），防止异步请求未完成时抛出错误；
• 组件名采用大写开头的驼峰命名法，内部函数使用动词开头的命名（如fetchUser、loadUser），提升代码可读性。

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