Остановить пагинацию на последней странице

Question

Я пытаюсь реализовать разбивку на страницы в реактивах, получая данные из JSON и используя axios для извлечения данных. Вот как я это делаю.

class Listing extends Component {
  items = [];
  page = 0;
  itemsPerPage = 4;

  constructor(props) {
    super(props);
    this.getData = this.getData.bind(this);
  }
  getData() {
    axios.get("https://api.myjson.com/bins/cdlry").then(res => {
      this.items = [...this.items, ...res.data];
      const nextPage = this.state.page + 1;
      this.setState({ page: nextPage });
    });
  }
  componentWillMount() {
    this.getData();
  }

 showPage() {
    const nextItemsIndex = (this.state.page - 2) * this.itemsPerPage;
    return this.items
      .slice(nextItemsIndex, nextItemsIndex + this.itemsPerPage)
      .map((data, index) => (
        <div key={index}>
        //looping data
         </div>
      ));
  }
render() {
    const items = this.showPage();
    return (
      <div id="listing">
        <br />
        <div>{items} </div>
        <button onClick={this.getData}>Load Next</button>
      </div>
    );
  }
}

В настоящее время, когда я нажимаю на кнопку, она не останавливается на последнем указателе или объекте. Это постоянно повторяется.

Должен ли я написать другую функцию для next страницы? и какой подход я должен использовать, чтобы перейти на страницу previous? Нужно ли использовать другой подход, чтобы сделать то же самое? Мой предыдущий подход был связан с this.setState({}) для перебора страниц.

Answer 1

Вы можете поместить данные, полученные из запроса, в состояние компонента вместо this.items и увеличивать переменную состояния page при каждом нажатии кнопки.

Вы хотите скрыть кнопку, если на текущей странице меньше элементов, чем должно быть на странице, или если последний индекс равен длине массива элементов.

Пример

class Listing extends React.Component {
  itemsPerPage = 4;
  state = {
    items: [],
    page: 0
  };

  componentDidMount() {
    fetch("https://api.myjson.com/bins/cdlry")
      .then(res => res.json())
      .then(items => {
        this.setState({ items });
      });
  }

  goToNextPage = () => {
    this.setState(({ page }) => ({ page: page + 1}));
  }

  render() {
    const { itemsPerPage } = this;
    const { items, page } = this.state;
    const startIndex = page * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const pageItems = items.slice(startIndex, endIndex);
    const isLastPage = pageItems.length !== itemsPerPage || endIndex === items.length;

    return (
      <div>
        <br />
        <div>
          {pageItems.map(data => (
            <div key={data.id}>{data.propertyFullName}</div>
          ))}
        </div>
        {!isLastPage && <button onClick={this.goToNextPage}>Load Next</button>}
      </div>
    );
  }
}

ReactDOM.render(<Listing />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>