时间戳

首页 > 解决方案 > React：如何对排序数据进行分页

javascript - React：如何对排序数据进行分页

问题描述

我正在研究 React 项目。我在哪里通过 API 获取数据并在 pagination 中显示它。实际上我想对项目中的数据进行排序，但问题是我已经为数据实现了分页。目前我正在获取数据并在分页中显示，但我实现了排序逻辑。当我单击表头时，数据已排序，但存储的所有数据都呈现在state一页中。我想要分页中的排序数据，我是 React 的初学者，有人可以帮我如何实现排序数据的分页。您还可以在给定GIF文件中看到项目流程。

Gif 文件（请点击这里查看我想要的项目流程）

代码

    class Example extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      Item: 5,
      skip: 0
    }

    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:8001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }

  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}


ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

标签： javascriptreactjsecmascript-6loopbackjs

解决方案

由于您可以直接/间接访问 api 端点，因此您应该在那里进行排序、分页、过滤等，并将您想要的项目返回到前端。对分页等的调用应该是对该特定查询的 api 请求。

如果您正在使用服务器端点进行分页等操作，那么如果您还没有研究 Redux，您可能会从中受益。

IMO，如果您想保持领先地位，请学习 GraphQL 和 React Hooks 以分别取消 REST 和 React 类。

预计到达时间：

除了生命周期调用的问题，当componentWillMount（不推荐使用 - 移入构造函数）它运行第一个get all partiesapi 时，因此，在安装第一页时，一切看起来都很好。

在btnClick()中，您设置Item但似乎没有在任何地方更改其值。我预计这可能是您的问题。

推荐阅读