TypeScript中如何将FetchAPI获取的JSON数据渲染为网页表格

原有代码问题说明 #

你写的初始fetch函数存在几处问题，无法支撑页面渲染：

• 箭头函数定义、链式调用括号匹配存在语法错误
• fetch响应需要先调用.json()方法才能拿到实际JSON数据，直接打印response对象拿不到业务数据
• 没有将请求到的数据存入可触发视图更新的组件状态

完整实现代码 #

import { useState, useEffect } from 'react';

// 根据接口返回结构定义TS类型，可按实际字段调整
interface UserItem {
  id: number;
  name: string;
  email: string;
  role: string;
  joinTime: string;
}

export default function UserTable() {
  // 分别定义表格数据、加载状态、错误信息状态
  const [dataList, setDataList] = useState<UserItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [errMsg, setErrMsg] = useState('');

  // 修正后的请求函数
  const getTableData = async () => {
    setLoading(true);
    setErrMsg('');
    const requestUrl = '替换为你的实际接口地址';
    try {
      const res = await fetch(requestUrl);
      if (!res.ok) throw new Error(`请求异常，状态码：${res.status}`);
      // 解析响应JSON
      const jsonData = await res.json();
      // 如果接口返回有外层包裹，比如{code:200, data:[]}，这里取jsonData.data即可
      setDataList(jsonData);
      console.log('接口返回数据：', jsonData);
    } catch (err) {
      setErrMsg(err instanceof Error ? err.message : '请求失败');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  // 组件挂载时自动拉取数据
  useEffect(() => {
    getTableData();
  }, []);

  // 渲染部分
  return (
    <>
      {/* 加载态 */}
      {loading && <div className="loading-tip">数据加载中...</div>}
      {/* 错误提示 */}
      {errMsg && <div className="err-tip" style={{color: '#f5222d'}}>{errMsg}</div>}
      {/* 表格区域 */}
      {!loading && !errMsg && (
        <table style={{width: '100%', borderCollapse: 'collapse', border: '1px solid #eee'}}>
          <thead>
            <tr style={{background: '#fafafa'}}>
              <th style={{padding: '8px 12px', border: '1px solid #eee'}}>ID</th>
              <th style={{padding: '8px 12px', border: '1px solid #eee'}}>姓名</th>
              <th style={{padding: '8px 12px', border: '1px solid #eee'}}>邮箱</th>
              <th style={{padding: '8px 12px', border: '1px solid #eee'}}>角色</th>
              <th style={{padding: '8px 12px', border: '1px solid #eee'}}>入职时间</th>
            </tr>
          </thead>
          <tbody>
            {/* 用map遍历数据渲染行 */}
            {dataList.map(item => (
              <tr key={item.id}>
                <td style={{padding: '8px 12px', border: '1px solid #eee'}}>{item.id}</td>
                <td style={{padding: '8px 12px', border: '1px solid #eee'}}>{item.name}</td>
                <td style={{padding: '8px 12px', border: '1px solid #eee'}}>{item.email}</td>
                <td style={{padding: '8px 12px', border: '1px solid #eee'}}>{item.role}</td>
                <td style={{padding: '8px 12px', border: '1px solid #eee'}}>{item.joinTime}</td>
              </tr>
            ))}
            {/* 空数据提示 */}
            {dataList.length === 0 && (
              <tr>
                <td colSpan={5} style={{padding: '16px', textAlign: 'center', color: '#999'}}>暂无数据</td>
              </tr>
            )}
          </tbody>
        </table>
      )}
    </>
  );
}

关键逻辑说明 #

• 用useState存储接口返回的数据，数据更新时会自动触发视图重渲染
• 表格行渲染核心是调用数组的map方法，遍历数据数组生成对应的<tr>节点，每个节点必须传唯一的key属性（优先用数据id），避免React渲染警告
• 补充了加载、错误、空数据三种边界状态的处理，避免页面出现空白
• 表格的表头、渲染字段、样式可以根据实际接口返回结构、UI需求自行调整

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