在最后一页停止分页

Question

我正在尝试在 reactjs 中实现分页，从 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>

在最后一页停止分页

Stop pagination on last page

reactjs

create-react-app