如何在React中映射并以表格形式展示数组数据？

MaterialTable 默认要求数据源是对象数组，但你当前的 tbldata 是二维数组结构，所以需要先把数据转换成符合要求的格式，再进行渲染。

步骤1：转换数据格式 #

遍历二维数组，将每一行数据与 headers 对应，转换成键为列头、值为对应单元格内容的对象：

const formattedData = tbldata.map(row => {
  return headers.reduce((acc, header, index) => {
    acc[header] = row[index];
    return acc;
  }, {});
});

步骤2：配置并渲染MaterialTable #

根据转换后的数据和 headers 生成表格列配置，再传入MaterialTable组件：

import MaterialTable from '@material-table/core';

function MyTable() {
  const headers = ['A', 'B', 'C', 'D'];
  const tbldata = [
    ['cat','dog','bird','cow'],
    ['victoria','vancouver','calgary','montreal'],
    ['apple','mango','bananas','grapes'],
    ['car','plane','truck','train']
  ];

  // 转换为MaterialTable支持的对象数组
  const formattedData = tbldata.map(row => {
    return headers.reduce((acc, header, idx) => {
      acc[header] = row[idx];
      return acc;
    }, {});
  });

  // 动态生成列配置
  const columns = headers.map(header => ({
    title: header,
    field: header
  }));

  return (
    <MaterialTable
      title="示例表格"
      columns={columns}
      data={formattedData}
    />
  );
}

export default MyTable;

关键说明 #

• columns 数组的每个元素需要包含 title（表头显示文本）和 field（对应数据源对象的键），这里直接用 headers 动态生成即可，无需硬编码。
• 如果 headers 和 tbldata 是从后端异步获取的，只需要在数据加载完成后执行转换逻辑即可。

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