Reactjs 数据表不显示

所以我尝试用react做一个mern应用程序，我尝试在一个表上显示数据，但它没有显示出来

这是我的反应页面，我在控制台中得到控制台错误，我将显示我的App.js getstudent.js，最后是我的displaytable.js

应用程序。js

import React from 'react';
import './App.css';
import GetStudents from './getstudents';

class App extends React.Component {
  render() {
  return (
  <div>
  <GetStudents/>

  </div>
)
}
}

export default App;

从“React”导入React；
导入“/App.css”；
从“/GetStudents”导入GetStudents；
类应用程序扩展了React.Component{
render（）{
返回(
)
}
}
导出默认应用程序；

getstudent.js

import React from 'react';
import './App.css';
import axios from 'axios';
import TableRow from './displaytable';
class GetStudents extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      student:[]
    }
  }

 componentDidMount() {
  axios.get( "http://localhost:3200/students")
   .then((myJson) => {
     this.setState({student:myJson.data});
   })
   .catch(error => console.error(error)); //If error occurs you will get here

}

tableRow () {
  return this.state.student.map(function(err, e) {
    return <TableRow obj={err} key={e} />
  });
}
render() {
  return(
   <div>
      <h1 align= "center">Student Attendance</h1>
      <table className = 'table-table-stripped' style={{margin:25}}>
       <thead>
          <tr>
            <th>Student Id</th>
            <th>Role Num</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Marks</th>

          </tr>

       </thead>
      <tbody>
         {this.tableRow}
      </tbody>

      </table>


   </div>
  )
}

}
export default GetStudents;

从“React”导入React；
导入“/App.css”；
从“axios”导入axios；
从“/displaytable”导入TableRow；
类getResact.Component{
建造师（道具）{
超级（道具）；
此.state={
学生：[]
}
}
componentDidMount（）{
axios.get（“http://localhost:3200/students")
。然后（（myJson）=>{
this.setState（{student:myJson.data}）；
})
.catch（error=>console.error（error））；//如果发生错误，您将到达此处
}
tableRow（）{
返回this.state.student.map（函数（err，e）{
回来
});
}
render（）{
返回(
学生出勤率
学生证
角色数
名字
姓
标志
{this.tableRow}
)
}
}
导出默认值；

displaytable.js，用于显示数据

import React from 'react';
import './App.css';

class TableRow extends  React.Component {
render() {
  return(
   <tr>
      <td>{this.props.obj._id}</td>
      <td>{this.props.obj.role_num} </td>
       <td>{this.props.obj.first_name}</td>
      <td>{this.props.obj.last_name}</td>
      <td><button className = 'btn-btn-danger'>Update</button> </td>
      <td><button className = 'btn-btn-danger'> Remove</button></td>
   </tr>

  )
}
}
export default TableRow;

从“React”导入React；
导入“/App.css”；
类TableRow扩展了React.Component{
render（）{
返回(
{this.props.obj.\u id}
{this.props.obj.role_num}
{this.props.obj.first_name}
{this.props.obj.last_name}
使现代化
去除
)
}
}
导出默认表行；

您必须在返回语句中调用

tableRow（）

函数：

      <tbody>
         {this.tableRow()}
      </tbody>

---

您需要创建另一个用于表体的组件，并在该组件内部执行与在表行函数和调用的组件（而不是函数）中相同的操作。下面是您的新组件

import React from 'react';
import './App.css';

class TableBody extends  React.Component { 
render() {
return(

    {this.state.student.map(function(err, e) {
      return <TableRow obj={err} key={e} />
    });}
  )}
  }
  export default TableBody;

从“React”导入React；
导入“/App.css”；
类表体扩展了React.Component{
render（）{
返回(
{this.state.student.map（函数（err，e）{
回来
});}
)}
}
导出默认表体；

然后在tbody下调用这个新组件，如下所示

<tbody>
   <TableBody>
</tbody>

@CatarinaFerreira你说我这么叫是什么意思？我仍然会遇到同样的错误，我的页面是空白的，所以我要创建另一个文件吗？我也会遇到意外的关键字

<tbody>
   <TableBody>
</tbody>