React Material UI表格如何映射渲染两个不同对象数组数据

核心问题出在渲染逻辑上：不要对appData和rows两个数组分别调用map渲染<TableRow>，这种写法会生成两套独立的表格行，必然导致列错位、行数翻倍。
所有列的渲染必须放在同一个循环生成的单个<TableRow>节点内，按行的对应关系同时取两个数组的字段即可。 #

场景1：两个数组按索引一一对应 #

如果appData和rows长度一致、顺序完全匹配（即第i行的个人信息对应appData[i]，地址/出勤信息对应rows[i]），直接以更长的数组长度为基准遍历即可，代码如下：

import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';

export default function CustomTable() {
  // 示例数据源
  // const appData = [{ id: 1, firstname: 'John', lastname: 'Doe' }, ...]
  // const rows = [{ address: 'xxx Street', attended: true }, ...]

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>ID</TableCell>
          <TableCell>First Name</TableCell>
          <TableCell>Last Name</TableCell>
          <TableCell>Address</TableCell>
          <TableCell>Attended</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {Array.from({ length: Math.max(appData.length, rows.length) }).map((_, idx) => {
          // 加空对象兜底，避免两个数组长度不一致时抛出undefined错误
          const appCol = appData[idx] || {};
          const rowCol = rows[idx] || {};
          return (
            <TableRow key={appCol.id ?? idx}>
              <TableCell>{appCol.id}</TableCell>
              <TableCell>{appCol.firstname}</TableCell>
              <TableCell>{appCol.lastname}</TableCell>
              <TableCell>{rowCol.address}</TableCell>
              <TableCell>{rowCol.attended ? 'Yes' : 'No'}</TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
}

场景2：两个数组靠关联字段匹配 #

如果两个数组顺序不对应，靠共同的关联字段（比如用户id）匹配对应记录，先把两个数据源合并成统一的行数据再渲染，逻辑更清晰也更易维护：

// 预处理合并数据源
const mergedRows = appData.map(appItem => {
  // 按id匹配对应的地址、出勤数据，根据你的实际关联字段调整判断条件
  const matchedExt = rows.find(item => item.userId === appItem.id) || {};
  return {
    ...appItem,
    ...matchedExt
  }
});

// 表格体渲染逻辑
<TableBody>
  {mergedRows.map(row => (
    <TableRow key={row.id}>
      <TableCell>{row.id}</TableCell>
      <TableCell>{row.firstname}</TableCell>
      <TableCell>{row.lastname}</TableCell>
      <TableCell>{row.address}</TableCell>
      <TableCell>{row.attended ? 'Yes' : 'No'}</TableCell>
    </TableRow>
  ))}
</TableBody>

注意：如果两个数组长度不一致，一定要加空值兜底逻辑，避免访问undefined属性导致页面崩溃。

相关尝试代码截图 #

• 第一次实现代码：
• 第二次实现代码：

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