React Antd Table无法加载Postgres动态数据问题求助

你的核心问题是直接把fetch返回的Response对象传给了Table的dataSource，但Antd Table需要的是解析后的JSON数组，不是原始的响应对象。浏览器能看到接口返回数据，是因为DevTools帮你解析了响应，但代码里没做这一步。

按下面的步骤修改代码即可解决：

1. 解析响应为JSON数据 #

fetch返回的response是HTTP响应对象，不是直接的业务数据，需要调用response.json()方法（异步操作，要加await）解析成JSON格式的数组/对象。

2. 修正初始状态值 #

把useState的初始值从null改成空数组[]，因为Antd Table的dataSource期望接收数组类型，null会导致表格无法正常识别数据状态。

修改后的完整代码 #

const columns: ColumnsType<DataType> = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: (text) => <a>{text}</a>
    },
    {
        title: 'Create Date',
        dataIndex: 'created_at',
        key: 'created'
    },
    {
        title: 'Created By',
        dataIndex: 'created_by',
        key: 'createdBy'
    }
]

function App() {
    // 初始值设为空数组，匹配Table期望的数组类型
    const [dataFromPg, setDataFromPg] = useState<DataType[]>([]);
    
    useEffect(() => {
        async function fetchData() {
            try {
                const response = await fetch('/profileTable');
                // 解析响应体为JSON数据
                const data = await response.json();
                setDataFromPg(data);
            } catch (error) {
                // 可选：处理请求失败的情况
                console.error('获取数据失败:', error);
            }
        }
        fetchData();
    }, []);
      
    return (
        // 加上rowKey，用数据里的唯一标识（比如name或数据库ID），避免Antd警告
        <Table columns={columns} dataSource={dataFromPg} rowKey="name" />
    )
}

额外提示 #

• 如果接口返回的是包含数组的对象（比如{ list: [...] }），要改成setDataFromPg(data.list)，确保传给Table的是纯数组。
• rowKey属性必须指定，用数据中唯一的字段，这是Antd Table的性能优化要求，也能避免控制台警告。

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