如何在React中使用.map()渲染表格体中的对象数组

我有一个名为theData的数据数组，结构如下：

const theData = [
    {
        student_id: 2,
        firstName: 'John',
        subject: 'Physics',
        grade:  90
    },
    {
        student_id: 14,
        firstName: 'Sally',
        subject: 'Biology',
        grade: 95
    },
    {
        student_id: 17,
        firstName: 'Roger',
        subject: 'Calculus',
        grade: 87
    },
    {
        student_id: 83,
        firstName: 'Mary',
        subject: 'Computer Science',
        grade: 99
    }]

我希望用React结合Material-UI将这些数据渲染成表格，目前只能渲染出第一行数据：

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

<TableContainer>
  <Table>
    <TableHead>
      <TableRow>
        <TableCell key='FirstName'>FirstName</TableCell>
        <TableCell key='Subject'>Subject</TableCell>
        <TableCell key='Grade'>Grade</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {
        <TableRow key={theData[0].student_id}>
          <TableCell key='firstName'>{theData[0].firstName}</TableCell>
          <TableCell key='Subject'>{theData[0].subject}</TableCell>
          <TableCell key='Grade'>{theData[0].grade}</TableCell>
        </TableRow>
      }
    </TableBody>
  </Table>
</TableContainer>

当前渲染结果：

firstName       subject        grade
John            Physics        90

请问如何在TableBody内使用.map()函数渲染完整的表格？

直接对theData数组调用.map()方法，遍历每一个元素生成对应的TableRow即可，替换掉原来只取theData[0]的代码：

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

<TableContainer>
  <Table>
    <TableHead>
      <TableRow>
        <TableCell key='FirstName'>FirstName</TableCell>
        <TableCell key='Subject'>Subject</TableCell>
        <TableCell key='Grade'>Grade</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {theData.map(student => (
        <TableRow key={student.student_id}>
          <TableCell key='firstName'>{student.firstName}</TableCell>
          <TableCell key='subject'>{student.subject}</TableCell>
          <TableCell key='grade'>{student.grade}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>

关键说明 #

• .map()会遍历数组中的每一个学生对象，为每个对象返回一个TableRow组件
• 每个TableRow的key必须使用唯一值，这里用student.student_id是最合适的，因为它是每个学生的唯一标识
• 每个TableCell的key要保证在当前TableRow内唯一，这里用对应的属性名即可

修改后就能渲染出所有学生的行数据，最终表格会显示全部4条记录。

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