我在我的用户列表中使用了DataTable组件来显示存储在我的数据库中的数据。
这是我的global.js文件
import React, { Component } from 'react';
import $ from 'jquery';
import DataTable from 'datatables.net';
function filterGlobal () {
$('#example').DataTable().search(
$('#global_filter').val()
).draw();
}
$(document).ready(function() {
$('#example').DataTable();
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
} );
} );
class Global extends React.Component {
constructor(props){
super(props);
this.state={
users:[],
isLoaded:false,
errorOnLoad:false
};
}
getuser(){
fetch('/api/users/getuser',{
method:'get'
})
.then((response)=>{
return response.json()
})
.then((data)=>{
this.setState({
users:data,
isLoaded:true,
err:{},
errorOnLoad:false,
});
this.getuser.bind();
})
.catch((err)=>{
this.setState({
err:err,
errorOnLoad:true
})
})
}
componentDidMount(){
this.getuser();
}
render() {
return (
<div>
<h2 className="contact-table">CONTACT LIST</h2>
<table>
<tbody>
<tr id="filter_global" style={{display: 'flex', justifyContent: 'flex-end'}}>
<td style={{width: '100px', alignSelf: 'center'}}>Global search</td>
<td align="center"><input type="text" className="global_filter" id="global_filter" style={{width: 'auto',border: '1px solid',marginBottom: '0px'}} /></td>
</tr>
</tbody>
</table>
<table id="example" className="display" style={{width: '100%'}}>
<thead>
<tr>
<th>Name</th>
<th>Email Address</th>
<th>Mobile Number</th>
<th>Message</th>
<th>Profile Photo</th>
</tr>
</thead>
<tbody>
{
this.state.users.map((user)=>(
<tr key={user.qid}>
<td>{user.name}</td>
<td>{user.emailAddress}</td>
<td>{user.mobileNumber}</td>
<td>{user.message}</td>
<td><img className="image-db" src={user.image} alt="" /></td>
</tr>
))
}
</tbody>
</table>
</div>
);
}
}
export default Global;
&#13;
这是我打开它时的显示页面。刷新页面或向表中添加新数据后发生错误。
当我刷新页面数据表不起作用并显示错误。 但我得到的所有数据和表格中没有数据
的错误谁能告诉我出了什么问题。
三江源。