Question

因此，我尝试使用react编写一个简单的应用程序，并尝试在表上显示数据，但未显示

这是我的反应页面，我在控制台中看到控制台错误，我将显示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;

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;

应该显示数据的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;

Answer 1

您必须在return语句中调用tableRow()函数：

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

*编辑您还必须更改tableRow函数。它应该返回一个元素或元素数组，所以：

import React, { Fragment } from 'react';
...
tableRow () {
  return (
  <Fragment>
  {
     this.state.student.map(function(err, e) {
       return <TableRow obj={err} key={e} />
     })
  }
  </Fragment>
}

Answer 2

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

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;

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

<tbody>
   <TableBody>
</tbody>

数据表不显示

2 个答案: