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，并且当我在第三个索引时，我想选择第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页，pageSize 3：索引从3（第4个元素）开始，切片的结束索引是3 + 3 = 6。因此切片将返回索引3,4,5（第4，第5和第6）的元素

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

1 个答案: