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。

如果当前页面的项目少于页面应有的数量，或者最后一个索引等于items数组的长度，则要隐藏按钮。

示例

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>

在最后一页上停止分页

1 个答案: