如何在 ReactJS 中使用数组来渲染表格？答案

【问题标题】：How to render tables using an array of arrays in ReactJS?如何在 ReactJS 中使用数组来渲染表格？
【发布时间】：2019-12-04 07:08:12
【问题描述】：

我有一个页面，其中包含一组具有不同组和成员的数组。我想要实现的是创建一个表，显示项目名称和其中的成员，如下所示：

------------ ------------ 
| Project1 | | Project2 | 
------------ ------------  
| student1 | | student2 |
------------ ------------  
| student2 | | student3 | 
------------ ------------  

------------ ------------ 
| Project3 | | Project4 | 
------------ ------------  
| student4 | | student6 |
------------ ------------  
| student5 | | student7 | 
------------ ------------

在实际数据集上，某些组可能有更多的学生，大约有 50 个组。下面是我在渲染与上面类似的表格时失败的尝试

import React, { Component } from "react";
import { Row, Container, Col, Form, FormGroup, Label, Input, Button, FormText, FormFeedback } from "reactstrap";

class ViewGroups extends Component {
  constructor(props) {
    super(props);

    this.state = {
      groups: [
        {
          projectName: "Project 1",
          students: [
            {
              name: "student1",
              GPA: "3.4"
            },
            {
              name: "student2",
              GPA: "3.2"
            }
          ] 
        },
        {
          projectName: "Project 2",
          students: [
            {
              name: "student3",
              GPA: "3.4"
            },
            {
              name: "student4",
              GPA: "3.9"
            }
          ] 
        },
        {
          projectName: "Project 3",
          students: [
            {
              name: "student5",
              GPA: "3.0"
            },
            {
              name: "student6",
              GPA: "3.1"
            }
          ] 
        },
        {
          projectName: "Project 4",
          students: [
            {
              name: "student7",
              GPA: "3.0"
            },
            {
              name: "student8",
              GPA: "3.5"
            }
          ] 
        }
    ]
    }
  }


  renderTableData() {
    return this.state.groups.map((group, index) => {
       const { projectName } = group 
       return (
          <tr>
             <td>{projectName}</td>

          </tr>
       )
    })
 }

  render() {
    return (
      <Container>
        <Form>
          <Col>
            <h1>Groups</h1>
          </Col>
          <div>
          <table id='groups'>
               <tbody>
                  {this.renderTableData()} 
               </tbody>
            </table>
          </div>
        </Form>
      </Container>
    );
  }
}

export default ViewGroups;

【问题讨论】：

您好，您能分享一下您的问题在哪里吗？
我不知道如何让每个项目的学生显示，因为他们在组内的另一个数组中
是的，但是当您运行代码时，错误在哪里？请发布您收到错误的位置。
如果您使用的是谷歌浏览器，您应该右键单击页面并选择控制台选项卡以查看弹出的错误
没有报错，但目前只是将项目名称显示为列表，就这样

标签： javascript arrays reactjs html-table

【解决方案1】：

您需要以某种方式呈现每个组的学生数据。像这样的：

renderTableData() {
  return this.state.groups.map((group, index) => {
     const { projectName, students } = group 
     return (
        <tbody>
           <tr>
             <td>{projectName}</td>
           </tr>
           {students.map((student) => (
             <tr key={student.name}>
               <td>{student.name}</td>
             </tr>
           })
        </tbody>
     )
  })
}

并删除包装器 tbody。

您必须移动列以匹配您想要的内容，但这是呈现内部学生数据的一般思路。

【讨论】：