javascript - 使用 slice() 根据 currentPage 值显示数组的有限部分

Question

我正在尝试在 ReactJs 中构建一个分页组件。我目前正在尝试让组件在 currentPage 之前和之后显示两个索引。例如，如果 currentPage 为 3，则应显示 1 2 3 4 5，如果 currentPage 为 6，则应显示 4 5 6 7 8 等等。如果索引不可用，则不会显示它，就像第一页一样，它前面不会有两个索引，所以它只会显示 1 2 3。

我有一个数组，其中包含作为 Prop 发送的 totalPages 列表以及 currentPage。我有以下逻辑，我使用 splice 来限制数组的内容

import React, {PropTypes} from 'react';
import styles from './Pagination.css';

const Pagination = ( {totalPages, currentPage, updateOnPageChange} ) => {
    let curr = currentPage,start = 0,end = parseInt(currentPage)+2;
    {(curr == 1 || curr == 2 )? start = 0 : start = parseInt(currentPage) - 2 }
    console.log(start + " " + currentPage +" "+totalPages+" "+end);
    return (
        <div className="pagination-div">
            <div className="pagination-wrapper">
                {
                    Array(totalPages).fill(1).slice(start,end).map((el, i) => (
                         <div className="number-wrapper" onClick={updateOnPageChange}>
                            {  
                               i+1 == currentPage ? <p className="current"><strong>{i+1}</strong</p>:<p>{i+1}</p>
                            }
                         </div>
                    ))
                }
            </div>
        </div>
    );
};

Pagination.propTypes = {
    totalPages: PropTypes.number.isRequired,
    currentPage: PropTypes.number.isRequired,
    updateOnPageChange: PropTypes.func.isRequired,
};

export default Pagination;

该组件适用于当前页面 1 和 2，但是之后，它仅显示最多 4 页的所有页面。我不明白为什么会这样，我有 34 页，因此我知道我没有用完页面。

任何帮助将不胜感激

编辑 - 我注意到如果我将零或任何其他数字作为 slice 函数的第一个参数，它会显示最多 currentPage + 2 的数字(因此逻辑以一种方式工作)。当我添加表达式或变量时，它似乎不起作用。

Answer 1

您正在映射切片数组的索引，这就是为什么您始终获得从 0 到 end - 1 的范围，因为切片后的数组始终从 0 开始索引。为了修复您的代码，首先，映射那些代码以更正页面索引，然后执行切片。

Array(totalPages)
.fill(1)
.map((el, i) => i + 1)
.slice(start,end)
.map(pageNumber => (
  <div className="number-wrapper" onClick={updateOnPageChange}>
  { pageNumber == currentPage 
  ? <p className="current"><strong>{pageNumber}</strong</p>
  : <p>{pageNumber}</p>
  }
  </div>
)