Reagstrap pagination следующий элемент не рендеринг - PullRequest
Новая
       9

Reagstrap pagination следующий элемент не рендеринг

1 голос
/ 31 октября 2019

Я пытаюсь динамически внедрить нумерацию полос React в данные моей таблицы. Это то, чего я достиг на данный момент: 


class TestPagination extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentPage: props.currentPage
    };
  }

  handleClick = (e, index) => {
    e.preventDefault();

    this.setState({
      currentPage: index
    });
  };

  render() {
    const { pageSize, pageCount, currentPage, data } = this.props;

    //here: pageSize: 5, pageCount: 4, currentPage: 0
    let pageNumbers = [];
    for (let i = 1; i <= pageCount; i++) {
      pageNumbers.push(
        <PaginationItem key={i} active={currentPage === i ? true : false}>
          <PaginationLink onClick={e => this.handleClick(e, i)} href="#">
            {i}
          </PaginationLink>
        </PaginationItem>
      );
    }

    return (
      <React.Fragment>
        {data[0]
          .slice(currentPage * pageSize, (currentPage + 1) * pageSize)
          .map((datum, i) => (
            <tr className="data-slice" key={i}>
              <td>{datum.id}</td>
              <td>{datum.message}</td>
             </tr>
          ))}
        <React.Fragment>
          <Pagination aria-label="Page navigation example">
            <PaginationItem disabled={currentPage <= 0}>
              <PaginationLink
                onClick={e => this.handleClick(e, currentPage - 1)}
                previous
                href="#"
              />
            </PaginationItem>
            {pageNumbers}

            <PaginationItem disabled={currentPage >= pageCount - 1}>
              <PaginationLink
                onClick={e => this.handleClick(e, currentPage + 1)}
                next
                href="#"
              />
            </PaginationItem>
          </Pagination>
        </React.Fragment>
      </React.Fragment>
    );
  }
}

export default TestPagination;

Я получаю свою таблицу с отображаемыми 4 номерами страниц. Но когда я нажимаю на следующую кнопку, ничего не происходит.

Следующая стрелка после страницы № 4 не отображает дальнейшие данные. Пожалуйста, помогите решить проблему.

1 Ответ

2 голосов
/ 31 октября 2019

В этой строке вы получаете currentPage из реквизита: 

    const { pageSize, pageCount, currentPage, data } = this.props;

Но currentPage нужно брать из состояния: 

    const { pageSize, pageCount, data } = this.props;
    const {currentPage} = this.state;

Поскольку я не знаю форму данныхв компоненте я использовал его как простой массив.

Рабочие коды и поле:

https://codesandbox.io/s/so-react-page-n89hq

import React, { Component } from "react";
import { Pagination, PaginationItem, PaginationLink, Button } from "reactstrap";

class TestPagination extends Component {
  constructor(props) {
    super(props);

    this.state = {
      currentPage: props.currentPage
    };
  }

  handleClick = (e, index) => {
    e.preventDefault();
    console.log(index);
    this.setState({
      currentPage: index
    });
  };

  render() {
    const { pageSize, pageCount, data } = this.props;
    const { currentPage } = this.state;

    let pageNumbers = [];
    for (let i = 0; i < pageCount; i++) {
      pageNumbers.push(
        <PaginationItem key={i} active={currentPage === i ? true : false}>
          <PaginationLink onClick={e => this.handleClick(e, i)} href="#">
            {i + 1}
          </PaginationLink>
        </PaginationItem>
      );
    }
    const paginatedData = data.slice(
      currentPage * pageSize,
      (currentPage + 1) * pageSize
    );

    return (
      <React.Fragment>
        {paginatedData.map((datum, i) => (
          <tr className="data-slice" key={i}>
            <td>{datum.id}</td>
            <td>{datum.message}</td>
            <td>
              <Button id={datum.i} color="primary">
                Edit Details
              </Button>
            </td>
          </tr>
        ))}
        <React.Fragment>
          <Pagination aria-label="Page navigation example">
            <PaginationItem>
              <PaginationLink
                onClick={e => this.handleClick(e, currentPage - 1)}
                previous
                href="#"
              />
            </PaginationItem>
            {pageNumbers}

            <PaginationItem disabled={currentPage >= pageCount - 1}>
              <PaginationLink
                onClick={e => this.handleClick(e, currentPage + 1)}
                next
                href="#"
              />
            </PaginationItem>
          </Pagination>
          <hr />
          currentPage (real): {this.state.currentPage} <br />
          currentPage (visual): {this.state.currentPage + 1}
        </React.Fragment>
      </React.Fragment>
    );
  }
}

export default TestPagination;

И используется внутри App.js следующим образом: 

function App() {
  const data = [
    { id: 1, message: "A" },
    { id: 2, message: "B" },
    { id: 3, message: "C" },
    { id: 4, message: "D" },
    { id: 5, message: "E" },
    { id: 6, message: "F" },
    { id: 7, message: "G" }
  ];

  return (
    <div className="App">
      <TestPagination pageSize={3} pageCount={3} currentPage={0} data={data} />
    </div>
  );
}
...