美好的一天。 我正在一个使用reactjs作为前端和流明创建API的小项目。 我想从数据库中检索所有记录并将其显示在jquery数据表中。 它实际上从数据库中检索了所有这些记录(约960条记录),但是检索后,它显示“表中没有可用数据”,这阻碍了数据表的搜索和排序工作。 下面是我的代码:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
import $ from 'jquery';
import axios from 'axios';
import { TheProject } from './TheProject';
import { Footer } from '../Footer';
import { Nav } from '../Nav';
import { Header } from '../Header';
export class Projects extends Component {
constructor(props) {
super(props);
this.state = {
projects: [],
cur_email: localStorage.getItem('cur_email'),
project_added: localStorage.getItem('project_added'),
project_uploaded: localStorage.getItem('project_uploaded'),
isUser: false,
isLoaded: false
}
}
componentDidMount() {
let data = "email="+this.state.cur_email;
axios({
method: 'post',
url: 'http://localhost:8000/projects',
data: data,
header: {
'Content-Type': 'application/json'
}
}).then(response => {
this.setState({
projects: response.data,
isUser: true,
isLoaded: true
});
})
.catch( error => {
console.log(error);
});
}
render() {
let project_added_text = null;
let project_uploaded_text = null;
let display_projects = null;
//display all projects in component
if(this.state.projects.length > 0) {
display_projects = this.state.projects.map( (project,index) => {
return <TheProject serial={index+1} title={project.title} researcher={project.researcher} matric={project.matric} supervisor={project.supervisor} year={project.year} degree={project.degree} field={project.field} keywords={project.keywords} abstract={project.abstract} added_on={project.created_at} updated_on={project.updated_at}/>
});
}
if(this.state.project_added) {
project_added_text = "Project was successfully added";
localStorage.removeItem('project_added');
} else if(this.state.project_uploaded) {
if(this.state.project_uploaded == 1) {
project_uploaded_text = this.state.project_uploaded+ " project was successfully uploaded";
} else if(this.state.project_uploaded > 1) {
project_uploaded_text = this.state.project_uploaded+ " projects were successfully uploaded";
}
localStorage.removeItem('project_uploaded');
}
return (
<div>
<div id="container" className="effect aside-float aside-bright mainnav-lg">
<Header/>
<div className="boxed">
<div id="content-container">
<div id="page-content">
<div className="row">
<div className="col-xs-12">
<div className="tabs-container">
<div className="tab-content">
<div align="center">
<Link to="/add-project" className="btn btn-info"><i className="ion-plus-circled"></i> Add New Project </Link>
<Link to="/upload-project" className="btn btn-mint"><i className="fa fa-upload"></i> Upload Projects </Link>
</div> <br/>
<div className="tab-content">
<div align="left">
<p className="text-success"> {project_added_text} </p>
<p className="text-success"> {project_uploaded_text} </p>
</div>
<div className="panel">
<div className="panel-heading">
<h3 className="panel-title"><i className="fa fa-bars"></i> Projects </h3>
</div>
</div>
<table id="demo-dt-basic" className="table table-striped table-bordered" style={{cellSpacing:0,width:'100%'}}>
<thead>
<tr>
<th>Title</th>
<th>Researcher</th>
<th>Matric no.</th>
<th>Supervisor</th>
<th>Pub. on</th>
<th>Degree</th>
<th>Field</th>
<th>Keywords</th>
<th>Abstract</th>
<th>Added on</th>
</tr>
</thead>
<tbody>
{display_projects}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<Nav/>
<div style={{clear:'both'}}> </div>
<Footer/>
<button className="scroll-top btn">
<i className="pci-chevron chevron-up"></i>
</button>
</div>
</div>
</div>
</div>
);
}
}
TheProject组件的代码如下:
import React from 'react';
export const TheProject = (props) => {
return (
<tr>
<td> {props.title} </td>
<td> {props.researcher} </td>
<td> {props.matric} </td>
<td> {props.supervisor} </td>
<td> {props.year} </td>
<td> {props.degree} </td>
<td> {props.field} </td>
<td> {props.keywords} </td>
<td> {props.abstract} </td>
<td> {props.added_on} </td>
</tr>
)
}
当我将一些虚拟内容粘贴为表数据行时,它在不显示“表中无可用数据”的情况下很好地工作,但是每当我从数据库中检索时,它将显示“表中无可用数据”,但仍会检索所有记录,这阻碍了搜索功能和排序工作。