反应分页下一步按钮答案

【问题标题】：React Pagination next button反应分页下一步按钮
【发布时间】：2018-11-09 00:58:32
【问题描述】：

我的分页有问题。当下一页上的记录不存在时，我想阻止下一页按钮。

渲染：

  render() {
    const characters = this.props.contacts;
    const { currentPage, todosPerPage } = this.state;
    const indexOfLastTodo = currentPage * todosPerPage;
    const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
    const currentTodos = characters.slice(indexOfFirstTodo, indexOfLastTodo);

    const renderTodos = currentTodos.map((character, index) => {
      return <div className="col-md-2">
      <img src={character.image} className="img-thumbnail" alt="" />
      <div className="content">
        <h6 className="header">{character.name}</h6>
        <h6 className="header">status: {character.status}</h6>
        <h6 className="header">species: {character.species}</h6>

      </div>
    </div>
    });
    const pageNumbers = [];
    for (let i = 1; i <= Math.ceil(characters.length / todosPerPage); i++) {
      pageNumbers.push(i);
    }
    const renderPageNumbers = pageNumbers.map(number => {
      return (
        <nav aria-label="Page navigation example">
        <ul className="pagination justify-content-center">
        <li className="page-link"
          key={number}
          id={number}
          onClick={this.handleClick}
        >
          {number}

        </li>
        </ul>
        </nav>
      );
    });
  return (
    <nav aria-label="Page navigation example">
    <div className="container">
      <div className="row">
      {renderTodos}
      </div>
      </div>
  <ul className="pagination justify-content-center">
    <li onClick={this.decrement} className="page-link">
      <a aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span className="sr-only">Previous</span>
      </a>
    </li>
    {renderPageNumbers}
    <li onClick={this.increment} className="page-link">
      <a aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span className="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>
  );
}
}
export default Pages;

在递减函数中，我创建了一个简单的条件，但我无法从 render() 获取 pageNumbers.length 值来递增函数。

还有其他方法可以解决这个问题吗？

【问题讨论】：

你怎么发现没有下一页了？
我现在明白了，你可以把你的 pageNumbers 函数放在 render 方法之外，然后从增量调用它来返回 pagenumber.length？
我试过了，但我有错误：'pageNumbers' is not defined no-undef
你应该在这里发布你的整个组件或者至少是渲染，需要知道字符来自哪里
整个组件不适合，但我现在发布了渲染

标签： javascript reactjs pagination

【解决方案1】：

在您的增量函数中，您可以计算最大页数并构造您的 if 条件，例如

  if(this.state.currentPage < this.props.contacts.length / this.state.todosPerPage)

【讨论】：

【解决方案2】：

你可以添加totalPages状态来解决这个问题

constructor(props) {
    super(props);
    this.state = {
      characters: [],
      currentPage: 1,
      todosPerPage: 6,
      totalPages: props.contacts / 6
    };
    this.handleClick = this.handleClick.bind(this);
  }
Increment/Decrement:

increment=(event)=> {
    if(this.state.currentPage<this.state.totalPages)
    this.setState({
      currentPage: this.state.currentPage+1

    });
  }

  decrement=(event)=> {
    if (this.state.currentPage>1)
    this.setState({
       currentPage: this.state.currentPage-1,
    });
  }

【讨论】：