将数组数据迭代到Material UI表中

import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@material-ui/core';

function ArrayTable({ data }) {
  return (
    <TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>列标题1</TableCell>
            <TableCell>列标题2</TableCell>
            {/* 添加更多列标题 */}
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((item, index) => (
            <TableRow key={index}>
              <TableCell>{item.field1}</TableCell>
              <TableCell>{item.field2}</TableCell>
              {/* 添加更多字段 */}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

const dataArray = [
  { field1: '值1', field2: '值2' },
  { field1: '值3', field2: '值4' },
  // 添加更多数据项
];

function ParentComponent() {
  return (
    <div>
      <h1>数组数据表格</h1>
      <ArrayTable data={dataArray} />
    </div>
  );
}