ReactJS如何在分页中一次显示5个页码

Question

所以我有这个分页代码，

class Pagination extends Component{

    render() {


        var { meta } = this.props.items2
        var numbers = !meta ? [] : Array.from({length: meta.pagination.total_pages },(v,k)=>k+1)
        console.log("data pagination", meta)
        return (
            <nav aria-label="Page navigation example">
              { !meta ? <span></span>
                : <ul className="pagination justify-content-center">
                            {meta.pagination.links.length === 0 ? <span></span> 
                                      : <li className="page-item">
                                          <button className="page-link" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                            <span className="sr-only">Previous</span>
                                          </button>
                                        </li>
                              }
                            {
                                numbers.map((item) => <li className={meta.pagination.current_page === item ? "page-item active" : "page-item"}><button className="page-link" onClick={() => this.props.pageNumber(item,"num")}>{item}</button></li>) 
                            }
                            {meta.pagination.links.length === 0 ? <span></span> 
                                      : <li className="page-item">
                                          <button className="page-link" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                            <span className="sr-only">Next</span>
                                          </button>
                                        </li>
                            }
                    </ul>
              }
            </nav>
            )

    }
}

其中，它显示了api中指定的所有页面。它看起来像这样：

下一个和上一个按钮还不起作用。并且显示所有页面。如何才能只显示 5 页，并且当单击 nexy 按钮时会显示接下来的 5 页？

编辑：根据@santosh 的回答，我收到一个错误Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

class Pagination extends Component{

    state = {
        startIndex : 0, 
        endIndex : 4
    }

  prevPage = () => {
        this.setState(prevState => ({
            startIndex : prevState.startIndex - 5,
            endIndex : prevState.endIndex - 5
        }));
    }

    nextPage = () => {
        this.setState(prevState => ({
            startIndex : prevState.startIndex + 5,
            endIndex : prevState.endIndex + 5
        }));
    }

    render() {
        var startIndex = this.state.startIndex
        var endIndex = this.state.endIndex
        var { meta } = this.props.items2
        var numbers = !meta ? [] : Array.from({length: meta.pagination.total_pages },(v,k)=>k+1)
        console.log("data pagination", meta)
        return (
            <nav aria-label="Page navigation example">
              { !meta ? <span></span>
                : <ul className="pagination justify-content-center">
                            {meta.pagination.links.length === 0 ? <span></span> 
                                      : <li className="page-item">
                                          <button className="page-link" onClick={
                                                        this.prevPage()
                                                    } aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                            <span className="sr-only">Previous</span>
                                          </button>
                                        </li>

                              }
                            {numbers.slice(startIndex, endIndex).map(item => (
                                <li className={meta.pagination.current_page === item ? 'page-item active' : 'page-item'}>
                                <button className="page-link" onClick={() => this.props.pageNumber(item, 'num')}>
                                {item}
                                </button>
                                </li>
                                ))
                                    }
                            {meta.pagination.links.length === 0 ? <span></span> 
                                      : <li className="page-item">
                                          <button className="page-link" onClick={
                                                        this.nextPage()
                                                    } aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                            <span className="sr-only">Next</span>
                                          </button>
                                        </li>
                            }
                    </ul>
              }
            </nav>
            )

    }
}

这是元

我正在从索引文件访问此分页组件。它被这样称呼

<Pagination 
pageNumber={this.pageNumber}
items2={items2}/>

Answer 1

可以通过以下方法完成。

1) 定义两个状态变量如下。

state = {..., startIndex : 0, endIndex : 4}

2）然后用这两个索引对数字数组进行切片。

{
    numbers.slice(startIndex, endIndex).map(item => (
        <li className={meta.pagination.current_page === item ? 'page-item active' : 'page-item'}>
            <button className="page-link" onClick={() => this.props.pageNumber(item, 'num')}>
                {item}
            </button>
        </li>
    ));
}

3）单击下一步按钮时，应使用setState更新状态值

上一次点击

this.setState((prevstate)=>{
    startIndex : prevstate.startIndex - 5,
    endIndex : prevstate.endIndex - 5
})

下一步点击

this.setState((prevstate)=>{
    startIndex : prevstate.startIndex + 5,
    endIndex : prevstate.endIndex + 5
})

可以根据要求添加检查数组限制的附加条件。希望这有帮助:)

代码与 onClick 绑定存在问题。

onClick={this.prevPage()}
onClick={this.nextPage()}

应该

onClick={this.prevPage}
onClick={this.nextPage}

请找到工作的codepen：https://codepen.io/imsontosh/pen/zmdGdj ?editors=0010