export default class TableList extends React.Component {
state = {
work_orders:[],
// search : "",
URL : 'http://localhost:8000/api/',
query: {
paginate : {
page: 1,
pageSize: 20,
totalPage: 0,
totalRows: 0,
startIndex: 0,
endIndex: 0,
},
condition: [],
sorting: {
id: 0,
order: "ASC",
},
search: "",
columns: [
{ title: 'WOID', field: 'WOID', type: 'numeric'},
{ title: 'Quantity', field: 'quantity', type: 'numeric'},
{ title: 'Order Status', field: 'orderStatus', },
{ title: 'Start Date', field: 'startDate', },
{title: 'End Date', field: 'endDate', }],
},
}
handleSearchChange =(text)=>{
this.setState(prevState=>({
query:{
...prevState.query,
search: text,
}
}));
console.log('query search is' + this.state.query.search);
this.getData();
}
componentDidMount(prevProps, prevState, snapshot){
console.log("did mount");
this.getData();
}
// static getDerivedStateFromProps(){
// this.getData();
// }
getData=()=>{
console.log('IN getDate');
var url = this.state.URL + 'test?'
var query = this.state.query;
console.log("page is: " + this.state.query.paginate.page);
Axios.post( url, query).then(result=>{
console.log("page is: " + this.state.query.paginate.page);
var pagi = result.data.pop();
console.log("pagi is " + pagi.page);
this.setState(prevState=>({
query:{
...prevState.query,
paginate:{
...prevState.query.paginate,
totalRows: pagi.totalRows,
totalPage: pagi.totalPage,
startIndex: pagi.startIndex,
endIndex: pagi.endIndex,
}
}}))
this.setState({work_orders: [...result.data]});
})}
componentDidUpdate(){
}
shouldComponentUpdate(){
return true;
}
handleFilterChange=(id_, val_)=>{
var fl = false;
if(this.state.query.condition.flag == false){
fl = true;
}
this.setState(prevState=>({
...prevState,
query:{
...prevState.query,
condition: [
...prevState.query.condition,
{id: id_, val: val_}
]
}
}
))
this.getData();
console.log(this.state);
// this.getData()
}
// componentDidUpdate(){
// this.getData();
// }
handleNextButtonClick= () =>{
console.log("in handle next");
this.setState((prevState, props)=>{
return{
...prevState,
query:{
...prevState.query,
paginate: {
...prevState.query.paginate,
page: prevState.query.paginate.page + 1,
}
}
}
}
);
console.log('page is ' + this.state.query.paginate.page);
this.getData();
}
handlePrevButtonClick=()=>{
this.setState(prevState=>({
...prevState,
query:{
...prevState.query,
paginate: {
...prevState.query.paginate,
page: prevState.query.paginate.page - 1,
}
}
}))
this.getData();
}
handleFirstButtonClick=()=>{
this.setState(prevState=>({
...prevState,
query:{
...prevState.query,
paginate: {
...prevState.query.paginate,
page: 1,
startIndex: 0,
endIndex: prevState.query.paginate.pageSize
}
}
}))
this.getData();
}
handleLastButtonClick=()=>{
this.setState(prevState=>({
...prevState,
query:{
...prevState.query,
paginate: {
...prevState.query.paginate,
page: prevState.query.paginate.totalPage,
}
}
}))
this.getData();
}
render(){
console.log(this.state.work_orders);
return (
<div>
<MaterialTable
options={{
sorting: true,
filtering: false,
search: true,
exportButton: true,
pageSize: 20,
pageSizeOptions: [5, 20, 50, 100],
thirdSortClick: true,
initialPage: 0,
debounceInterval: 500,
paging: true,
}}
// data = {this.state.work_orders}
columns={this.state.query.columns}
data={this.state.work_orders}
title="Work Orders"
components={{
Toolbar: props => (<MTableToolbar
{...props}
ref={ref => (this.child = ref)}
setState={state => this.setState(state)}
onSearchChanged={debounce((searchtext) => {
console.log('the text is: ' + searchtext);
// const query = {...this.child.state.query}
// this.child.setState({searchText: text});
this.handleSearchChange(searchtext);
}, 500)}
/>),
Pagination: props => (<CustomPagination
{...props}
rowsPerPage = {this.state.query.paginate.pageSize}
pageIndex = {this.state.query.paginate.page}
count = {this.state.query.paginate.totalPage}
rows={this.state.query.paginate.totalRows}
startIndex={this.state.query.paginate.startIndex}
endIndex={this.state.query.paginate.endIndex}
handleNextButtonClick={this.handleNextButtonClick}
handlePrevButtonClick={this.handlePrevButtonClick}
handleFirstButtonClick={this.handleFirstButtonClick}
handleLastButtonClick={this.handleLastButtonClick}
/>)
}}
/>
</div>
);
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
question from:
https://stackoverflow.com/questions/65928898/react-update-state-one-step-behind