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

Question

我正在尝试在 React 中设置页面分页 Material 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。