如何处理在反应表分页?

Question

我正在制作一个react应用程序，其中一个表被渲染，我想在它上实现分页，表工作正常，数据来自模拟api，但分页不工作。

谁能建议一些方法?下面是我的表格代码:

import React, { Component } from "react";
import { Table, Header, Menu, Icon, Pagination } from "semantic-ui-react";
import axios from "axios"
//create a react component with name MessageDashBoard
export default class MessageDashBoard extends Component{
//constructor
constructor(props){
super(props);
this.state = {
messages: [],
page: 1,
total: 0,
loading: false
}
}
//componentDidMount
componentDidMount(){
this.getMessages();
}
//getMessages
getMessages(){
this.setState({loading: true});
axios.get('https://my-json-server.typicode.com/himanshuranjan30/demo/db')
.then(response => {
console.log(response.data.data);
this.setState({
messages: response.data.data,
total: response.data.data.length,
loading: false
});
})
.catch(error => {
console.log(error);
});
}
//handlePageChange
handlePageChange(page){
this.setState({page: page});
this.getMessages();
}

//render

render(){
//show response data in a table
return(
<div>
<Table celled>
<Table.Header fullWidth>
<Table.Row>
<Table.HeaderCell>message_ctrl_id</Table.HeaderCell>
<Table.HeaderCell>message</Table.HeaderCell>
<Table.HeaderCell>message status</Table.HeaderCell>
<Table.HeaderCell>acknowledgement</Table.HeaderCell>
<Table.HeaderCell>acknowledgement status</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{this.state.messages.map(message => {
return(
<Table.Row key={message.message_ctrl_id}>
<Table.Cell>{message.message_ctrl_id}</Table.Cell>
<Table.Cell>{message.message}</Table.Cell>
<Table.Cell>{message.message_status}</Table.Cell>
<Table.Cell>{message.acknowledgement}</Table.Cell>
<Table.Cell>{message.acknowledgement_status}</Table.Cell>
</Table.Row>
)
}   
)}
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.Cell>
<Pagination
page={this.state.page}
total={this.state.total}
loading={this.state.loading}
onPageChange={()=>this.handlePageChange(this.state.page)}
perPage={10}
pageSize={10}
pagination={<Pagination.Pagination />}
/>
</Table.Cell>
</Table.Row>
</Table.Footer>
</Table>
</div>
)
}
}

在上面的代码中，我实现了一个表，它的数据正在使用axios获取，然后我在页面上呈现它。我也能够看到下面的页面按钮，但他们不工作的点击。如何设置每页没有数据并能够更改页面?

感谢

Answer 1

你需要这些修改:

1. 在getMessages中，您应该得到page并正确total，如下所示:

let temp = [...this.state.messages, ...response.data.data]; // if you  want to have all messages in one page! otherwise your code is fine
this.setState({
messages: temp,
total: temp.length,
page: response.data.page, // your backend response should have current page parameter
loading: false
});

2. 在Pagination你应该修改onPageChange如下:

onPageChange={()=>this.handlePageChange(this.state.page+1)}