使用Material Table远程数据渲染及表格行处理时遇"data.map is not a function"错误

常见原因 #

• data并非数组类型：Material Table要求data属性必须传入数组，若直接将接口返回的完整响应对象（如包含code、data字段的结构）赋值给表格，就会触发该错误。
• data初始值不符合要求：初始化时将data设为null、undefined或空对象，组件渲染时会尝试对非数组值调用map方法，导致报错。
• 接口返回数据格式异常：比如接口返回字符串、null，或者数组嵌套层级错误。

解决步骤 #

1. 正确提取接口返回的数组数据 #

处理接口响应时，精准提取数组部分赋值给表格数据：

const fetchRemoteData = async () => {
  const response = await fetch('你的远程接口地址');
  const resData = await response.json();
  // 提取数组字段，兜底设为空数组避免异常
  setTableData(resData.data || []);
};

2. 设置数组类型的初始值 #

初始化表格状态时，默认使用空数组：

const [tableData, setTableData] = useState([]);

3. 渲染时确保data始终为数组 #

在Material Table组件中，通过兜底逻辑保证传入的data是数组：

<MaterialTable
  title="远程数据表格"
  columns={yourColumnsConfig}
  data={tableData ?? []}
  // 其他配置项...
/>

4. 排查接口返回数据结构 #

在控制台打印接口返回结果，确认数据格式是否符合预期：

console.log('接口返回完整数据:', resData);

如果返回的是字符串，需先进行JSON解析；如果返回null，要添加兜底处理。

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