React+TypeScript对接C#/PostgreSQL后端：获取数据无法渲染求助

核心问题 #

控制台能看到数据但React组件无法渲染，根源在于响应数据结构匹配错误和组件返回逻辑不严谨。

具体修复步骤 #

1. 修正响应数据的取值路径 #

你的代码中使用setUsers(res.data)，但从网络响应来看，后端返回的是直接的用户数组，而非嵌套在data字段中的对象。这会导致res.data为undefined，最终users始终是空数组，无法渲染内容。

将这行代码修改为：

setUsers(res);

2. 修复组件返回逻辑 #

users的初始值是[]（空数组），永远不会等于undefined，所以if (users !== undefined)这个判断完全多余。更关键的是，若代码路径走到判断之外（虽当前不会发生），组件会返回undefined，触发React报错。

直接去掉冗余判断，可添加加载状态提升用户体验：

return (
    <div>
        {users.length === 0 ? (
            <p>加载中...</p>
        ) : (
            users.map((user) => (
                <div key={user.userId}>
                    <h2>{user.userName}</h2>
                    <p>{user.email}</p>
                </div>
            ))
        )}
    </div>
);

3. 添加请求错误处理 #

当前代码未处理请求失败场景，万一网络错误或后端报错，会导致控制台报错且无法排查。给fetch添加错误捕获逻辑：

useEffect(() => {
    getUsers()
        .then((resp) => {
            if (!resp.ok) throw new Error('请求失败');
            return resp.json();
        })
        .then((res) => {
            setUsers(res);
        })
        .catch(err => {
            console.error('获取用户数据失败:', err);
        });
}, []);

修改后的完整UserList组件 #

import {useEffect, useState} from 'react';

interface User {
    userId: number;
    userName: string;
    email: string;
}

function UserList() {
    const [users, setUsers] = useState<User[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        getUsers()
            .then((resp) => {
                if (!resp.ok) throw new Error(`HTTP错误: ${resp.status}`);
                return resp.json();
            })
            .then((res) => {
                setUsers(res);
                setError(null);
            })
            .catch(err => {
                setError(err.message);
                console.error('获取用户数据失败:', err);
            })
            .finally(() => {
                setLoading(false);
            });
    }, []);

    if (loading) return <div>加载中...</div>;
    if (error) return <div>出错了: {error}</div>;

    return (
        <div>
            {users.map((user) => (
                <div key={user.userId}>
                    <h2>{user.userName}</h2>
                    <p>{user.email}</p>
                </div>
            ))}
        </div>
    );
}

async function getUsers(): Promise<Response> {
    return await fetch('user');
}

export default UserList;

额外检查点 #

• 确认后端返回的字段名（如userId、userName）和前端User接口完全一致（注意大小写，PostgreSQL可能返回蛇形命名如user_id，需后端映射为驼峰）。
• 检查网络请求URL是否正确，必要时添加前缀（如/api/user），避免跨域或路径错误。

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