私のコードにページネーションアルゴリズムのヘルプが必要ですか？

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）私はpageSizeが3であるため、4番目から6番目のインデックスを選択したいと思います.3番目のインデックスには7番目から9番目のインデックスなどを選択したいのですが、どのアルゴリズムを使うのか分かりません。助けて？

Answer 1

これはいかがですか？ 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)} /> 
    }) 
} 

は、pageSizeを3：スライス3（第4要素）と終了インデックスが3 + 3 = 6であるからインデックスが開始されます。スライスはインデックス3、4、5（4th、5th n 6th）の要素を返します