Question

我正在尝试通过获取和分页制作应用程序，一页上应该有12个元素，到目前为止，我已经实现了一些东西，有12个元素，我可以看到下一页和上一页，但是我希望实现查看页数，然后能够例如从第一页跳到第三页等，有没有人知道如何做？我的代码：

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      photos: [],
      thumbnailUrl: '',
      visible: 0,
      nextVisible: 12,
      error: ''
    }
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/photos')
      .then(response => response.json())
      // .then(json => console.log(json))
      .then(resp => {
        this.setState({
          photos: resp,
        })
      })

  }

  loadMore() {
    this.setState((prev) => {
      return {
        visible: prev.visible + 12,
        nextVisible: prev.nextVisible + 12,
        error: ''
      }
    })
  }
  loadLess() {
    if (this.state.nextVisible > 12) {
      this.setState((prev) => {
        return {
          visible: prev.visible - 12,
          nextVisible: prev.nextVisible - 12,
        }
      })
    } else {
      this.setState({
        error: 'you are on first page'
      })
    }
  }

  render() {

    return (
      <div>
        <Grid>
          <Row>
            <Col md={6}>
          {this.state.photos.slice(this.state.visible, this.state.nextVisible).map((e, i) =>
                <ColumnFirst
                  title={e.title}
                  thumbnailUrl={e.thumbnailUrl}
                  key={i}
                />
              )}

              <button onClick={e => this.loadLess(e)}>Previous Page</button>
              <button onClick={e => this.loadMore(e)}>Next Page</button>
              <p>{this.state.error}</p>

            </Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

export default App;

编辑：我尝试使用react-js-pagination，但是除了可以看到下面的页面数之外，更改页面时什么也没有发生，我的意思是我知道如何编写函数来查看下12页或上一页。但是以某种方式我不知道如何以某种方式让应用计算并向我显示特定页面上的元素

handlePageChange(pageNumber) {
    console.log(`active page is ${pageNumber}`);
    this.setState({ activePage: pageNumber });
  }

<Col md={6}>

              {this.state.photos.slice(this.state.visible, this.state.nextVisible).map((e, i) =>
                <ColumnFirst
                  title={e.title}
                  thumbnailUrl={e.thumbnailUrl}
                  key={i}
                />
              )}
              <Pagination
                activePage={this.state.activePage}
                itemsCountPerPage={this.state.nextVisible}
                totalItemsCount={this.state.photos.length}
                pageRangeDisplayed={5}
                onChange={e => this.handlePageChange(e)}

              />
              <button onClick={e => this.loadLess(e)}>Previous Page</button>
              <button onClick={e => this.loadMore(e)}>Next Page</button>
              <p>{this.state.error}</p>

            </Col>

Answer 1

我自己对此有疑问。我走了胆小鬼的路，只用了React-Paginate：）。

其npm页面为here。如果将来由于某种原因链接中断，请搜索“ react-paginate”。

它的github页面是here。如果将来链接中断，只需在github上搜索“ AdeleD”，然后查找react-paginate仓库即可。该文档还可以。您确实只需要按照自述文件部分中的说明操作demo / js / demo.js文件，就可以了。

这不能回答您的问题。但是，希望它为您提供了一条替代路线，以防您无法及时找到解决方案。祝你好运！

Answer 2

您可以使用ant design表解决此问题，我已经创建了一个沙箱here https://codesandbox.io/s/6yz87n6wn，请参考下面的代码段

import React, { Component } from "react";
import axios from "axios";
import { Table } from "antd";

const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "Album Id",
    dataIndex: "albumId",
    key: "albumId"
  },
  {
    title: "Title",
    dataIndex: "title",
    key: "title"
  }
];
class AntTable extends Component {
  state = {};
  componentDidMount() {
    axios("https://jsonplaceholder.typicode.com/photos").then(resp => {
      this.setState({
        data: resp.data
      });
    });
  }
  render() {
    return (
      <div>
        Hello
        <Table columns={columns} dataSource={this.state.data} />
      </div>
    );
  }
}

export default AntTable;

干杯！

反应获取和分页

2 个答案: