arrays - 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 的回答，我得到一个错误超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，就会发生这种情况。 React 限制嵌套更新的数量以防止无限循环。

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 数组进行切片。

{
    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 绑定(bind)有问题。

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

应该是

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

请找到工作代码笔:https://codepen.io/imsontosh/pen/zmdGdj?editors=0010