回迁和分页

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分页，但除了这一点，我可以看到下面的页面数，当我更改页面时，什么都不会发生，我的意思是我知道如何编写一个函数来查看接下来的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

你可以使用ant design table来解决这个问题，我在这里创建了一个沙盒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;

干杯

Answer 2

我自己也有一个问题。我把懦夫们带了出去，只是使用了React-Pagate：）。

npm页面就在这里。如果链接将来因任何原因中断，只需搜索“react paginate”。

github页面就在这里。如果将来链接中断，只需在github上搜索“AdeleD”，然后查找react paginate repo。文件没问题。你只需要浏览一下demo/js/demo。js文件，如read me部分所述，你应该准备好了。

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