Material UI表格无法展示API数据，数据处理报错寻求解决方案

核心问题分析 #

API返回的是数组，但代码执行时data并非预期的数组结构，导致data.map()调用报错，最终Material UI表格无法渲染数据。常见诱因包括API返回结构嵌套、代码语法错误、数据类型校验缺失三类。

分步解决方案 #

1. 先确认API返回的真实结构 #

在const data = await response.json();后添加日志，打印完整返回内容及类型，定位数据所在层级：

const rawData = await response.json();
console.log('API完整返回:', rawData);
console.log('是否为数组:', Array.isArray(rawData));

如果打印发现rawData是嵌套对象（比如{ code: 200, data: [...] }），需要提取内部的数组字段，示例：

// 根据实际返回的字段名调整，比如rawData.list或rawData.result
const targetData = Array.isArray(rawData) ? rawData : (rawData.data || []);

2. 修复数据获取逻辑的语法与类型校验 #

原代码存在headers对象未闭合的语法错误，同时添加数组类型校验，避免非数组调用map：

useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await fetch(apiUrl, {
        method: 'POST',
        headers: { token: bearer } // 修复原代码缺失的闭合括号
      });
      const rawData = await response.json();
      // 提取真实数组，适配不同返回结构
      const data = Array.isArray(rawData) ? rawData : (rawData.data || []);
      
      console.log('待映射数据:', data); // 确认数据是否正确提取
      
      const mappedData = data.map(({ id, device_name, OEM, sdk_version, deviceKey, valid_upto }) =>
        createData(id, device_name, OEM, sdk_version, deviceKey, valid_upto)
      );
      setRows(mappedData);
    } catch (error) {
      console.error('数据获取失败:', error);
    }
  };
  
  fetchData();
}, []);

3. 表格渲染添加空值与加载状态处理 #

确保表格在数据未加载或为空时能正常展示，避免渲染异常：

// 组件内新增加载状态
const [loading, setLoading] = useState(true);

// 在fetchData中更新加载状态
try {
  // ... 原有数据处理逻辑
  setRows(mappedData);
} catch (error) {
  console.error('数据获取失败:', error);
} finally {
  setLoading(false);
}

// 表格渲染部分
if (loading) {
  return <div>加载中...</div>;
}

return (
  <TableContainer>
    <Table>
      {/* 表格表头 */}
      <TableBody>
        {rows.length === 0 ? (
          <TableRow>
            <TableCell colSpan={6} align="center">暂无数据</TableCell>
          </TableRow>
        ) : (
          rows.map((row) => (
            <TableRow key={row.id}>
              <TableCell>{row.device_name}</TableCell>
              <TableCell>{row.OEM}</TableCell>
              <TableCell>{row.sdk_version}</TableCell>
              <TableCell>{row.deviceKey}</TableCell>
              <TableCell>{row.valid_upto}</TableCell>
            </TableRow>
          ))
        )}
      </TableBody>
    </Table>
  </TableContainer>
);

4. 额外检查点 #

• 确认createData函数返回结构与表格列匹配，示例：

function createData(id, device_name, OEM, sdk_version, deviceKey, valid_upto) {
  return { id, device_name, OEM, sdk_version, deviceKey, valid_upto };
}

• 检查token格式是否正确，部分API要求前缀Bearer ，即token: Bearer ${bearer}`。

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