React TypeScript调用自定义API返回undefined，如何在React Table展示数据？

1. 先确认API请求本身是否正常 #

• 打开浏览器DevTools的Network面板，重新触发API请求，查看：
  • 状态码：是否为2xx（如200），如果是4xx/5xx，说明后端API存在问题，优先排查后端接口
  • 响应体：直接查看Response内容，如果这里就是undefined或空值，问题出在后端，与前端无关
• 也可以用Postman直接调用API，验证返回结果是否符合预期

2. 排查前端API调用逻辑 #

常见错误示例 #

• 使用fetch时未正确解析响应：

  // 错误：直接返回响应对象，未解析JSON数据
  fetch('/api/your-data')
    .then(res => setTableData(res))
    .catch(err => console.error(err));
  

• 使用axios时直接取响应对象而非response.data：

  // 错误：axios的实际返回数据在response.data字段中
  axios.get('/api/your-data')
    .then(res => setTableData(res))
    .catch(err => console.error(err));
  

正确调用方式 #

Fetch版本：

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [tableData, setTableData] = useState<any[]>([]); // 建议替换为具体TypeScript接口

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/your-data', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            // 如需认证，添加token：'Authorization': `Bearer ${yourToken}`
          }
        });
        
        if (!response.ok) {
          throw new Error(`请求失败，状态码：${response.status}`);
        }
        
        const data = await response.json();
        console.log('API返回数据:', data); // 打印确认数据结构
        setTableData(data);
      } catch (error) {
        console.error('API请求错误:', error);
      }
    };

    fetchData();
  }, []);

  // 后续渲染逻辑
};

Axios版本：

import { useState, useEffect } from 'react';
import axios from 'axios';

const YourComponent = () => {
  const [tableData, setTableData] = useState<any[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/api/your-data', {
          headers: {
            'Content-Type': 'application/json',
            // 如需认证，添加token：'Authorization': `Bearer ${yourToken}`
          }
        });
        
        console.log('API返回数据:', response.data);
        setTableData(response.data);
      } catch (error) {
        console.error('API请求错误:', error);
      }
    };

    fetchData();
  }, []);

  // 后续渲染逻辑
};

3. 适配API数据结构到React Table #

• 多数API会返回嵌套结构（如{ code: 200, data: [...] }），此时需要提取数组部分：

  const data = await response.json();
  setTableData(data.data); // 取data字段下的数组，而非整个返回对象
  

• 使用TypeScript定义明确的接口，避免类型推断错误：

  interface TableRow {
    id: number;
    name: string;
    age: number;
    // 其他字段
  }
  
  const [tableData, setTableData] = useState<TableRow[]>([]);
  

4. 渲染时的边界处理 #

在渲染React Table前，先判断数据是否存在，避免undefined导致报错：

if (!tableData || tableData.length === 0) {
  return <div>加载中或暂无数据</div>;
}

// 渲染React Table
return (
  <Table
    columns={yourColumns}
    data={tableData}
    // 其他配置项
  />
);

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