页面分页总是显示第一个元素React JS

Question

我试图在React中设置页面分页材料UI，但总是在1秒后重定向到页面1，显示正确的元素。我使用控制台日志，可以看到切片正在更改0..1、1..2和2..3，但内容没有。

{
this.state.teams
.slice((this.state.page - 1) * itemsPerPage, this.state.page * itemsPerPage)
.map((product,index) => (

<TeamCard
className={stylesMain.TeamCard}
number={this.state.teams[index]}
teamNum={this.state.teamNum[index]}
verified ={this.state.verified[index]}
/>

<Pagination
color="primary"
count={Math.ceil(resultLength/1)}
size="small"
page={this.state.page}
onChange={this.handleChange2}
defaultPage={1}
showFirstButton
showLastButton
/>

constructor(props){
super(props);
this.state = {
teams: [],
page: 1
}
}
handleChange2 = (event, value) => {
this.setState({page: value});
};
componentDidMount() {
this.getTeams();
}

Answer 1

因为您使用的是index。索引将总是从0到itemsPerPage。因此this.state.teams[index]将是第1页的元素。

您需要在map上使用product。