如何在 React 中使用 .map() 在表体中呈现对象数组答案

【问题标题】：How to render an array of objects inside a table body using .map() in React如何在 React 中使用 .map() 在表体中呈现对象数组
【发布时间】：2023-02-04 02:01:58
【问题描述】：

我有一组数据，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 以表格形式呈现这些数据。

我可以渲染第一排表格使用以下内容：

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

我将如何呈现整个表格使用 .map() 函数在TableBody 元素内？

提前致谢！

【问题讨论】：

你尝试了什么，什么没有按预期工作？
我尝试使用索引以程序方式呈现表格。我的目标是使用.map()（我不知道如何应用于此数据）以更优雅的方式呈现它。

标签： javascript reactjs

【解决方案1】：

有了这样的东西

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(row =>
          <TableRow key={row.student_id}>
            <TableCell key='firstName'>{row.firstName}</TableCell>
            <TableCell key='Subject'>{row.subject}</TableCell>
            <TableCell key='Grade'>{row.grade}</TableCell>
          </TableRow>
        )}
      </TableBody>
    </Table>
  </TableContainer>

【讨论】：