我需要分页算法帮助我的代码

Question

我的页面和pageSize由组件作为回调提供，这是我的代码：

renderTodos(page=0, pageSize=3) {
 if(page) {
    this.setState({
      current: page,
      page: page
    })
  }
   var f = this.state.page*2;
  var x = this.state.page*2;
  console.log("page ", f)
  console.log("page ", x+1)
    return this.props.todos.slice(f,x+1).map((todo,todoIndex) => {
      return <Todo
        key={todo.id}
        {...todo} // pass all the todo property
        onClick={() => onTodoClick(todo.id)}
        onTrashClick={() => onDeleteClick(todo.id, todoIndex)}
        handleSelectedTodo = {this._handleSelectedTodo}
        isChecked={this.state.checkedIds.includes(todo.id)}
      />
   })
}

我的问题是我在选择合适的索引时遇到问题，假设我在第 2 页上(与 pageSize 一起在回调中提供(我想选择第 4 到 6 个索引，因为我的 pageSize 为 3，当我在第 3 个索引上时，我想选择第 7 到 9 个索引等等，但我无法弄清楚要使用什么算法。 帮助？

Answer 1

这个怎么样？

renderTodos(page=0, pageSize=3
{ 
     if(page) { 
         this.setState({ current: page, page: page }) 
     } 
     var f = page * pageSize;
     var l = f + pageSize;
     return this.props.todos.slice(f, l).map((todo,todoIndex) => { 
         return <Todo key={todo.id} {...todo} // pass all the todo property
         onClick={() => onTodoClick(todo.id)} 
         onTrashClick={() => onDeleteClick(todo.id, todoIndex)
         handleSelectedTodo = {this._handleSelectedTodo
         isChecked={this.state.checkedIds.includes(todo.id)} /> 
     })
}

对于第 1 页，页面大小 3：索引从 3(第 4 个元素(开始，切片的结束索引为 3+3=6。所以 slice 将返回索引 3、4、5(第 4、5 和 6(处的元素